Testing queryFn with jest & enzyme

[dalladirosa]

Hi i want to test queryFn from this line of code

const { data } = useQuery(["jobDetail", jobName], () => getJob({ jobName }));

This is what I'm trying to do. I mock getJob function like this

jest.mock("../../../api/jobs", () => ({
  getJob: ({ jobName }: { jobName: string }) =>
    jest.fn(() => ({
      created_by: "Dalla",
      brand_name: "FAS",
      prediction_start_date: "22-05-1997",
      data_exporting_duration: "22-05-1997",
      is_hyperparameter_search_enabled: true,
      hyperparameter_search_max_execution_time: 10,
    })),
}));

and check if getJob function is called

expect(getJob({ jobName: defaultProps.jobName })).toBeCalled();

and i still get an error

expect(jest.fn()).toBeCalled()

Expected number of calls: >= 1
Received number of calls:    0

Does anyone know what is the right way to test queryFn? Thank you

[TkDodo]

Not sure, you’re not showing how you call the hook in the test. my approach is not mocking the function, but mocking on the network layer. The docs suggest nock: https://react-query.tanstack.com/guides/testing#testing-network-calls and I personally prefer msw: https://tkdodo.eu/blog/testing-react-query

[dalladirosa]

Do you know why i always got TypeError: _reactQuery.default is not a constructor?

[TkDodo]

I do not. have a look at the repo I've attached to my blog, it has working examples: https://github.com/TkDodo/testing-react-query

[TkDodo]

are you maybe mocking the whole react-query library like here?

https://stackoverflow.com/questions/67354617/typeerror-reactquery-default-is-not-a-constructor

[dalladirosa]

What do you mean by mocking the whole react-query?
Can you give me the example?

[TkDodo]

have you seen the stackoverflow link?

jest.mock('react-query', () => ({ 
  useQuery: () => ({ isLoading: false, isError: false, data: [], }),
  useMutation: () => ({ mutate: {}, isError: false, isLoading: false }),
  useQueryClient: () => null,
}));