Example setup for Preact + Jest + Enzyme + React Query

[jasonhilldm]

I am struggling to get testing working with Jest + Enzyme + React Query as the test generates the following error from within the QueryClientProvider of React Query:

TypeError: Cannot read properties of null (reading 'useEffect')

I have tried using a super-simple test case like this and still get the error:

import { h } from "preact";
import { render } from "enzyme";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { describe, test } from "@jest/globals";

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            retry: false,
        },
    },
});

describe("Simple test case", () => {
    test("Simple test", () => {
        render(<QueryClientProvider client={queryClient} />);
    })
});

When I test my own Preact component with a useEffect call from preact/hooks, then it works fine, so I assume it is something in my config that is not wired up correctly for non-Preact modules that use React hooks.

Is there a good example of how to configure testing with Preact + Jest + Enzyme + React Query?

[rschristian]

Have you set up preact/compat aliases? We have instructions on our site if you have not.

Providing a reproduction repo would help a lot.

[rschristian]

Perhaps yes, a separate page on Jest-isms (and other testing frameworks) could be useful. I'll open an issue for tracking shortly. Edit: Created preactjs/preact-www#927 for tracking.

Wrapping expect in act() isn't going to do anything, no. That's not what it's there for. This isn't anything special for react-query, just async effects in general. This should sort you out I believe:

test("Simple test", async () => {
    const wrapper = mount(<MyComponent />);
    await act(async () => {
        await Promise.resolve(wrapper);
        await new Promise(resolve => setImmediate(resolve));
        wrapper.update();
    });
    expect(wrapper.find("h1").text()).toBe("Test");
});

[jasonhilldm]

Thanks for your help. I had to import core-js to be able to use setImmediate...is that right (I am using jsdom as the test environment in my jest config).

I'm not sure I have everything configured correctly as there are seem to be so many different approaches mentioned online that it is making my head spin a bit!

[rschristian]

I had to import core-js to be able to use setImmediate

Ah yeah, that's "right" though probably unnecessary. Apologies, swiped that from an older project while on the go and not looking too closely. The following is more correct and should work the same without needing a polyfill:

test("Simple test", async () => {
    const wrapper = mount(<MyComponent />);
    await act(() => Promise.resolve());
    wrapper.update();
    expect(wrapper.find("h1").text()).toBe("Test");
});

(The await Promise.resolve(wrapper) from above does nothing, must've been some fragment I had left over.)

Jest indeed is super configurable, which does lead to many different approaches and options. But, so long as your test suite runs as you wish, it's correct enough. Can alter pieces bit by bit when needed.

[jasonhilldm]

Ah right...I was wondering what that line was supposed to do!

With your latest code, I am still seeing the original content in the wrapper (the initial component loading states), so it doesn't appear that the queries have been loaded by the time it gets to the expect test.

[rschristian]

Are you mocking out the query response? The Promise.resolve() should be sufficient to flush the task queue if you are, but if you're not, that alone might not be sufficient. You may need to rely on setTimeout, which is quite hacky, but, to be honest, so is this.

Unfortunately this is a bit of an issue with React's API in general, you're just not able to react to the promise from within your component. You're stuck with hacks like waiting or polling for changes.

[jasonhilldm]

I was starting with just trying to get the unmocked query working first and was then just going to mock the axios.get so that the test was using as much of the real application code as possible. Sounds like that might not be that simple though.

I'm a newbie to testing React components (obviously!), so am trying to figure out the best practices for setting this up so that I can test an app as comprehensively as possible. Do you have any recommendations or pointers to some full examples of testing an application with API calls via React Query? Some pointers on how/where to implement the mocking would be super helpful.

[rschristian]

Sorry, I use neither Enzyme nor React Query, so don't have anything in particular to point to. Stack Overflow, React Query's issues/discussions, and/or Enzyme issues/discussions are your best bets though.

[jasonhilldm]

This worked great once I had mocked my API calls. Thanks for all your help.