Jest test checking Devtools in DOM fails after change

[julio-dionisio-compass]

Hello,

I am working on a project that contains a Jest test that renders an app with ReactQueryDevTools, and asserts its class is in the document with the below:

await waitFor(() => expect(container.querySelector('.ReactQueryDevtools')).toBeInTheDocument())

The change in react-query version 3.17.2 (and after) is now making this test fail. FYI, the test sets process.env.NODE_ENV to development before rendering.

I have not been able to figure out how to make this test pass.

Anyone has any idea on how I can fix the test, or why this is happening?

Thanks!

[TkDodo]

Look for the icon that opens the devtools maybe? We have internal tests for the devtools, you can see how to find it there. You could also pass initiallyOpen: true to the devtools

[julio-dionisio-compass]

ReactQueryDevTools is not loading to the DOM, so checking for the icon or setting initialIsOpen to true or false does not fix the issue.

[TkDodo]

right, at the moment, ReactQueryDevTools only node if node_env is DEVELOPMENT. Question: why do you want to test the devtools in your app?

[julio-dionisio-compass]

The reason is simply to make sure ReactQueryDevTools loads in the Development environment.

Before rendering, the test sets process.env.NODE_ENV = 'development', and the test passes if using a version earlier than 3.17.2. The failure is only when running the Jest test; running the app locally renders ReactQueryDevTools.

If there is no way to figure out a fix for this, I can just remove the test.

[TkDodo]

here is how we test it internally with jest and testing-library: https://github.com/tannerlinsley/react-query/blob/16e70e1fb9f67de5924d53cb56faa1e95bd6d7d2/src/devtools/tests/devtools.test.tsx#L18

[julio-dionisio-compass]

Thank you. I will try to udpate the test from this, otherwise I will simply remove it from the suite.