Question

我想解释一下这种情况。目前我的测试失败，原因如下：

第一种情况：TypeError：react_query_1.useQueryClient 不是函数
第二种情况：类型错误 react_query_1.QueryClient 不是构造函数

场景是：

我在 next-js 项目中配置了 react-query 并且我正在运行不同类型的测试。

在 _app.js 中我有：

<QueryClientProvider client={queryClient}>
            <MainAppContainer>
                 <Component {...pageProps}
            </MainAppContainer>
 </QueryClientProvider>

位于 config/client.ts 中的 queryClient 文件

import { AxiosError } from "axios";
import Router from "next/router";
import { QueryClient } from "react-query";

export const minValidityRetry = 2;

export const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            refetchOnWindowFocus: false,
            refetchOnMount: false,
            onError: (err: AxiosError) => {
                if (err?.response?.status === 403) {
                    Router.push('/unauthorized');
                }
            }
        },
    }
});

我有这个功能，它用于不同的组件：

import { useQueryClient } from 'react-query';

export function useContextAni() {
  const queryClient = useQueryClient();
  const profilingCached: { dataContext: IDataContext } = queryClient.getQueryData('profiling');
  const contextAniCached = profilingCached?.dataContext.ani || UserStorage.contextAni();
  
  return contextAniCached;
}

我有一个 mocks/react-query/index.tsx 因为我需要填充这些数据


const reactQuery = jest.requireActual('react-query');

const useQueryClient = () => ({
    getQueryData: (index) => {
        if (index === 'profiling') {
            return ({
                dataContext: {
                    ani: ''
                },
                profile: {}
            })
        }
    }
});

reactQuery.useQueryClient = useQueryClient

export default reactQuery;

但这会抛出 TypeError: react_query_1.QueryClient is not a constructor

如果您没有创建 __mocks __ / react-query / index.tsx 来模拟该对象，则会出现第二种情况：Type error react_query_1.QueryClient is not a constructor

而且会有很多测试失败的情况。

测试示例：

it("Component render ok", () => {
        const wrapper = shallow(<RechargeResume amount={100} credit={"104"} lineRecharge={ani}/>) 
        expect(wrapper).toBeTruthy()
});

该组件使用 useContextAni 钩子

const RechargeResume = (props: {
    credit: string | string[];
    amount: number;
    type?: string | string[];
    lineRecharge?: string | string[];
}) => {
    const router = useRouter();
    const ani = useContextAni();
....

有什么帮助吗？

react-query useQueryClient 不是 Jest 中的函数或 QueryClient 不是构造函数

0 个答案: