React Native[Testing]: Queries are stuck in loading

[tarikfp]

Describe the bug

Hey!👋 I wanted to implement offline support to my current react-native app, thus upgraded react-query to ^4.0.0-beta.14.
However, I've noticed that useQuery hooks are not returning any data when testing, they are stuck in loading state...

When I downgrade the react-query back to 3.39.1 everything works as expected again!

Your minimal, reproducible example

reproducible example

Steps to reproduce

Expected behavior

useQuery hook should stuck in loading state when testing in ^4.0.0-beta.14

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• React Native

react-query version

^4.0.0-beta.14

TypeScript version

^4.0.5

Additional context

No response

[TkDodo]

you need to provide more information please. we have a react native example in the docs that you can fork for a minimal reproduction, thanks.

[tarikfp]

you need to provide more information please. we have a react native example in the docs that you can fork for a minimal reproduction, thanks.

Hi there, thanks for the quick response. I created a minimal repo.

[TkDodo]

Thanks. I don't really know how to run tests in expo snack 🤔 ? But I have updated my testing-react-query repository to work with v4, and it works fine. Have a look:

• https://github.com/TkDodo/testing-react-query/blob/5e4dc865391038eadb8c62d6abdcdba36280be32/src/tests/hooks.test.tsx#L9-L17

Note that I also removed react-hooks-testing-library, as its going to be deprecated soon:

• Deprecate @testing-library/react-hooks testing-library/react-hooks-testing-library#849

renderHook now exists in react-testing-library, and I've just used that. API is a bit different because waitFor needs a Promise, not a boolean returned, but that's a small adaption. It seems that react-native-testing-library also has a renderHook method - maybe that would be worth a try?

[tarikfp]

Thanks for replying. I am afraid that renderHook in RNTL has not been released yet.

I am guessing/assuming that you did not encounter the error as it was a react project, not a react-native.

On the other hand, I also did try renderHook from @testing-library/react whereas it requires having installed react-dom package.

Below is the error when trying test renderHook from @testing-library/react.

Test suite failed to run

    Cannot find module 'react-dom/test-utils' from 'node_modules/@testing-library/react/dist/act-compat.js'

Installing react-dom package to react-native will cause further errors such as shown below. (Obviously an expected error...)

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/en/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.
    
    ReferenceError: document is not defined

I guess waiting for RNTL to release renderHook in their API seems the only solution.
Nevertheless, I really would love to see a working example with react-native project but not react. Perhaps, I might be misconfiguring/missing stuff somehow :)

[TkDodo]

Can you tell me how i can run the test in expo snack? Then i can play around with it

[tarikfp]

Unfortunately, I also do not have also information regarding running tests on expo snack. I have created a minimal react native app for this purpose.

[kylebake]

@tarikpnr same boat here, using react-native with testing-library/react-native and their new renderHook doesn't operate the same way as all of the other implementations. I have no issue getting the tests to pass with testing-library/react or with testing-library/react-hooks. I'm going to try to open something on their repo to address this since https://github.com/testing-library/react-hooks-testing-library is going to be deprecated

edit: callstack/react-native-testing-library#1030

[TkDodo]

I'm going to close this as an upstream issue with react-native-testing-library as shown here

• renderHook result values with waitFor not working callstack/react-native-testing-library#1030

feel free to re-open if there is something we can do on react-query side