"Jest did not exit one second after the test run has completed" msg in react native

Viewed 2848

I try to make a simple test

import 'react-native';
import React from 'react';
import App from '../src/App';
import {render} from '@testing-library/react-native';

// Silence the warning https://github.com/facebook/react-native/issues/11094#issuecomment-263240420
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

it('renders correctly', async () => {
  const {findByText, findAllByText} = render(<App />);
  const homeText = await findByText(/home/i);
  expect(homeText).toBeTruthy();
});

But when it run I get the below msg

Jest did not exit one second after the test run has completed.

This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

In a web enviroment, I saw that could be resolve stopping some service like mongoose.close() for example, but here in RN idk what it is the thing that should stop to resolve that message. Could you help me please?

EDIT: this pic show console run with --detectOpenHandles flag enter image description here

And the code is below

HomeScreen.js

import React from 'react';
import {Button, FlatList, Text, TouchableOpacity, View} from 'react-native';
import {useQuery} from 'react-query';
import {routes} from '../utils/routes';
import {getBirras} from '../utils/services';

const HomeScreen = ({navigation}) => {
  const {data, error, isLoading} = useQuery('/beers', getBirras);
  const itemStyle = {color: 'black', fontSize: 26};

  if (isLoading) {
    return <Text>Cargando...</Text>;
  }

  if (error) {
    return <Text>Error al cargas birras</Text>;
  }

  return (
    <React.Fragment>
      <Text>Home page {data && data.length}</Text>
      {data && (
        <FlatList
          keyExtractor={(item, index) => item.name}
          data={data}
          renderItem={({item}) => {
            return (
              <TouchableOpacity
                onPress={() =>
                  navigation.navigate(routes.detailsPage, {id: item.id})
                }>
                <Text style={itemStyle}>
                  {item.name} - {item.id}
                </Text>
              </TouchableOpacity>
            );
          }}
        />
      )}

      <Button
        title="Go to detail"
        onPress={() => navigation.navigate(routes.detailsPage)}
      />
    </React.Fragment>
  );
};

export default HomeScreen;

DetailScreen.js

import React from 'react';
import {Text, View} from 'react-native';
import {useQuery} from 'react-query';
import {getABirra} from '../utils/services';

const DetailsScreen = ({route}) => {
  const {id} = route.params;

  const {data, error, isLoading} = useQuery(['detailBirra', id], getABirra);
  
  return (
    <View style={{color: 'black'}}>
      {data && (
        <>
          <Text style={{color: 'black'}}>Slogan: {data[0].tagline}</Text>
          <Text>Description: {data[0].description}</Text>
        </>
      )}
    </View>
  );
};

export default DetailsScreen;

services.js

import Config from 'react-native-config';

export const getBirras = async () => {
  try {
    const data = await fetch(`${Config.API_URL}/beers`);
    return data.json();
  } catch (error) {
    throw error.response;
  }
};

export const getABirra = async ({queryKey}) => {
  try {
    const data = await fetch(`${Config.API_URL}beers/${queryKey[1]}`);
    return data.json();
  } catch (error) {
    return error.response;
  }
};
0 Answers
Related