React testing library with mocha - mocking api call in test fails

Question

I have a page that I want to test. These are the components that I am testing:

export const Header = memo(() => {
    const { caseId } = useCase();
    const { api } = useApiData();
    const {
        data: { data: caseData },
    } = api.getCase(caseId);

    return (
        <Suspense
            fallback={
                <div className="flex justify-center">
                    <Loader size="3xlarge" title="Loading..." variant="interaction" />
                </div>
            }
        >
        ...some code

In this componet I am doing an api call with react-query, where api.getCase looks like this:

const getCase = (caseId: number) =>
        useQuery({
            queryKey: `case-${caseId}`,
            queryFn: (): Promise<AxiosResponse<CaseDto>> => caseApi.api.getCase(caseId),
            staleTime: Infinity,
            suspense: true,
        });

And CasePage component looks like this:

export const CasePage = () => {
    const { activeStep, setActiveStep } = useCase();
    
    return (
        <PageWrapper name="tracking-wide">
            <div className="max-w-[1092px] mx-auto px-6 py-6">
                <Stepper
                    aria-labelledby="stepper-heading"
                    activeStep={STEPS[activeStep]}
                    onStepChange={(x) => setActiveStep(x)}
                    orientation="horizontal"
                    className="mb-8"
                >
                    <Stepper.Step>{capitalize(Stepper.INCOME)}</Stepper.Step>
                    <Stepper.Step>{capitalize(Stepper.WORK)}</Stepper.Step>
                </Stepper>
                <FormWrapper />
            </div>
        </PageWrapper>
    );
};

I have tried to set up a test with mock service worker, react testing library and mocha:

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            suspense: true,
        },
    },
});
const renderWithRouter = (ui, { route = "/" } = {}) => {
    window.history.pushState({}, "Test page", route);

    return {
        user: userEvent.setup(),
        ...render(ui, { wrapper: BrowserRouter }),
    };
};

const server = setupServer(
    rest.get(`${environment.url.case}/api/case/:caseId`, (req, res, ctx) => {
        return res(ctx.set("Content-Type", "application/json"), ctx.body(JSON.stringify(caseMockApiData)));
    })
);

before(() => server.listen());
afterEach(() => server.resetHandlers());
after(() => server.close());

describe("CasePage", () => {
    it("should render", async () => {
        renderWithRouter(
            <QueryClientProvider client={queryClient}>
                <CaseProvider caseId={Number(1)}>
                    <Header />
                    <CasePage />
                </CaseProvider>
            </QueryClientProvider>,
            { route: "/case/1?step=income" }
        );

        await waitFor(() => {
            const activeStepButton = document.querySelector(".stepper__step--active");
            expect(activeStepButton.innerHTML).includes("Income");
        });
    });
});
   

But, this fails and I get a following error:

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

Ignored nodes: comments, script, style

at runWithExpensiveErrorDiagnosticsDisabled (node_modules/@testing-library/dom/dist/config.js:47:12)
at checkCallback (node_modules/@testing-library/dom/dist/wait-for.js:127:77)
at Timeout.checkRealTimersCallback (node_modules/@testing-library/dom/dist/wait-for.js:121:16)
at listOnTimeout (node:internal/timers:559:17)
at processTimers (node:internal/timers:502:7)