How can I set the initial value of the queryClient to test code using "Hydration in SSR (e.g. usequeryClient.prefetchQuerthe) in react-testing-library and jest-dom environment.

[p-iknow]

reproduce

• codesandbox: https://codesandbox.io/s/epic-voice-lrjhs?file=/__test__/pages/index.test.js

Background

I refer to this link - Using Hydration and usequeryClient.prefetchQuery as below as.

import React from 'react'
import { dehydrate, QueryClient } from 'react-query'
import { Layout, Header, InfoBox, Name } from '../components'
import { fetchName } from '../hooks'

const Home = () => {
  return (
    <Layout>
      <Header />
      <InfoBox>ℹ️ This page shows how to use SSG with React-Query.</InfoBox>
      <Name />
    </Layout>
  )
}

export async function getStaticProps() {
  const queryClient = new QueryClient()

  await queryClient.prefetchQuery('name', () => fetchName())

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  }
}

export default Home

I tested the above Home component in a js-dom environment using the reaction testing library. the code is as follows.
Because it was difficult to implement the serverside environment(e.g. getServerSideProps) in the test environment, I used queryClient.setData to set initiaData instead of "queryClient.prefetchQuery('name', () => fetchName()) -> dehydration -> hydration" process.

/**
 * @jest-environment jsdom
 */


import { render, screen, queryClient } from '../test-utils';
import { server } from '../../mocks/server';
import Home from '../../pages';

beforeAll(() => {
  server.listen();
});
afterEach(() => {
  server.resetHandlers();
});
afterAll(() => {
  server.close();
});

jest.mock('next/router', () => require('next-router-mock'))
it('SSR prefetch test' ,() => {
        // `queryClient.setQueryData()` was used instead of hydration.
	queryClient.setQueryData('name', {data: {name: 'John Doe'}})

	render(<Home/>)

	expect(screen.getByText('John Doe')).toBeInTheDocument(); 

})

Since the initial data was set through queryClient.setQueryData(), I expected the above test to be successful.

However, the test failed with a message that John Doe could not be found in dom. Perhaps the initial data setting through 'queryClient.setQueryData()' does not work as I intended.

Question

• What can I do when testing code using hydration(queryClient.prefetchQuery) in a react-testing-library and jest-dom?
• How can the queryClient have initial data before render? without delivering the prop to the component directyl.

[TkDodo]

you're not showing how you use the queryClient in the testing code. Are you sure that the queryClient where you set the data to is the one that is used to render the component?

Also, are you sure that the data nesting is necessary? Again, can't tell because I'm not seeing the actual useQuery call.

It's always hard to help with just code snippets and screenshots. Best would be a minimum codesandbox reproduction.

[p-iknow]

@TkDodo
I'm sorry. I put the codes and box link. Please check it again.
codesandbox: https://codesandbox.io/s/epic-voice-lrjhs?file=/__test__/pages/index.test.js

Here is the part where useQuery is used.
https://codesandbox.io/s/epic-voice-lrjhs?file=/components/Name/index.js:0-307

[TkDodo]

in your sandbox, your hook unwraps data:

const fetchName = async () => {
  const { data } = await axios.get(API_PATH);
  return data;
}

const useName = () => {
  return useQuery('name', () => fetchName())
}

so if you want to set it with setQueryData, you'd need to probably do:

- queryClient.setQueryData('name', {data: {name: 'John Doe'}})
+ queryClient.setQueryData('name', {name: 'John Doe'})

also, you'll still likely get a failing background refetch because of the default staleTime of 0.

In my blog, I encourage mocking on a different layer via msw: https://tkdodo.eu/blog/testing-react-query

[p-iknow]

@TkDodo Thank you so much.