_reactQuery.QueryClient is not a constructor

Viewed 16

I am trying to start writing tests using jest and react-testing-library but when I try to import a react component which should be wrapped in QueryClientProvider, It throws the error

    TypeError: _reactQuery.QueryClient is not a constructor

      18 | ]
      19 |
    > 20 | const createTestQueryClient = () => new QueryClient({
         |                                     ^
      21 |     defaultOptions: {
      22 |         queries: {
      23 |             retry: false,

//testUtils.tsx
import { render } from '@testing-library/react'
import { rest } from 'msw'
import * as React from 'react'
import {QueryClient, QueryClientProvider } from 'react-query'

export const handlers = [
    rest.get(
        '*/react-query',
        (req, res, ctx) => {
            return res(
                ctx.status(200),
                ctx.json({
                    name: 'mocked-react-query'
                })
            )
        }
    )
]

const createTestQueryClient = () => new QueryClient({
    defaultOptions: {
        queries: {
            retry: false,
        },
    },
})

export function renderWithClient(ui: React.ReactElement) {
    const testQueryClient = createTestQueryClient()
    // const testQueryClient = new QueryClient();
    const { rerender, ...result } = render(
        <QueryClientProvider client={testQueryClient}>{ui}</QueryClientProvider>
    )
    return {
        ...result,
        rerender: (rerenderUi: React.ReactElement) =>
            rerender(
                <QueryClientProvider client={testQueryClient}>{rerenderUi}</QueryClientProvider>
            ),
    }
}

export function createWrapper() {
    const testQueryClient = createTestQueryClient()
    // const testQueryClient = new QueryClient();
    return ({ children }: {children: React.ReactNode}) => (
        <QueryClientProvider client={testQueryClient}>{children}</QueryClientProvider>
    )
}

//OrgDetails.test.tsx
import { render, screen } from "@testing-library/react";
import {QueryClient, QueryClientProvider} from "react-query";
import OrgDetails from "./OrgDetails";
import { renderWithClient } from './testUtils'

var MockData = {
  organization_id: "test",
  name: "test",
  installations: [
    {
      ID: 24148217,
      CreatedAt: "2022-08-26T09:34:40.220008Z",
      UpdatedAt: "2022-08-26T09:34:40.220008Z",
      DeletedAt: null,
      organizationID: "test",
      accountID: 35756816,
      targetType: "User",
    },
  ],
  environments: null,
  kube_integrations: null,
  basic_integrations: null,
  oidc_integrations: null,
};

jest.mock("react-query", () => ({
  useQuery: jest
    .fn()
    .mockReturnValue({ data: { ...MockData }, isLoading: false, error: {} }),
}));

test("show correct org name", () => {
    const result = renderWithClient(<OrgDetails />)
});

0 Answers
Related