Jest warning while using the RTK Query useQuery hook in React Native project

[JBudny]

Hi,

I'm currently working on a React Native project testing template using the RTKQ and MSW library, but I stumbled upon a Jest warning. The warning happens only while testing components based on useQuery hook. The manual dispatch of the RTKQ initiate action followed by using redux useSelector hook doesn't cause the warning.

The warning:

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

Minimal repo to reproduce the issue: https://github.com/JBudny/react-native-rtkq-testing-with-msw ant then:

• to see the warning: git checkout 8e78174 npm test or yarn test
• to see the workaround with manual useDispatch and useSelector: git checkout 838c1b2

I got the mentioned workaround from here callstack/react-native-testing-library#810. A similar issue that I think might be helpful I've found under the other query-like library tannerlinsley/react-query#1847. I also think it might be important to mention that I use cross-fetch as I found a working setup here #1271.

[JBudny]

I've just found out that while dispatching redux-toolkit action creators it's necessary to return the unsubscribe callback to be called in the useEffect cleanup. After doing that it looks like the workaround I mentioned above no longer works.

[JBudny]

For anyone having the same issue.

In this specific case I ended up updating jest to the latest "^27.4.2" version and then I used:

beforeEach(() => {
    jest.useFakeTimers('legacy')
})

afterEach(() => {
    jest.useRealTimers()
})

I'm not sure if it's the proper approach to deal with this warning, but eventually it disappeared. It may break other tests using jest fake timers utilities, because msw seems to not play nice with jest fake timers.

[markerikson]

This may be related to https://github.com/reduxjs/redux-toolkit/issues/1762 ?

[rickyalmeidadev]

I was facing a similar issue. I fixed it by preventing the API from keeping the data when the code is running in the test environment. A code example of my solution:

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: 'any-base-url',
  }),
  keepUnusedDataFor: process.env.NODE_ENV !== 'test' ? 60 : 0, <- here
  endpoints: () => {
    return {
      // your endpoints
    };
  },
});

My answer to a related question on Stack Overflow: https://stackoverflow.com/a/70734352/15442064

[JBudny]

@markerikson Looks like that's what I was looking for. Thanks! :smiley:

I'm closing the issue as it seems to be the right answer