[英]TypeError: _reactQuery.default is not a constructor
Hi guys I'm using jest and enzyme to write a unit test for react app everything was going well but suddenly I got an error because of QueryClient, QueryClientProvider大家好,我正在使用 jest 和酶为反应应用程序编写单元测试一切进展顺利,但由于 QueryClient、QueryClientProvider 突然出现错误
I'm trying to take a snapshot from my App but I got this error我正在尝试从我的应用程序中拍摄快照,但出现此错误
TypeError: _reactQuery.default is not a constructor
It's related to react query can anyone help!它与反应查询有关,任何人都可以帮忙!
Here's my code这是我的代码
App.js应用程序.js
import { QueryClient, QueryClientProvider } from "react-query";
import { Dashboard } from "./components/Dashboard";
import "./App.css";
const queryClient = new QueryClient();
export function App() {
return (
<QueryClientProvider client={queryClient}>
<Dashboard />
</QueryClientProvider>
);
}
export default App;
App.test.js应用程序.test.js
import { render, screen } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from "react-query";
import renderer from 'react-test-renderer';
import { App } from './App';
describe("<App /> component:", () => {
const { queryClient } = new QueryClient({
defaultOptions: {
queries: {
staleTime: Infinity,
},
},
});
it('renders correctly', () => {
const tree = renderer
.create(
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
test('renders loading', () => {
render(<App />);
const linkElement = screen.getByText(/Loading.../i);
expect(linkElement).toBeInTheDocument();
});
});
setupTest.js setupTest.js
import '@testing-library/jest-dom';
import { configure } from "enzyme";
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
configure({adapter: new Adapter()});
jest.mock('react-chartjs-2', () => ({
Bar: () => null, // add any additional chart types here
Line: () => null
}));
jest.mock('react-query', () => ({
useQuery: () => ({ isLoading: false, isError: false, data: [], }),
useMutation: () => ({ mutate: {}, isError: false, isLoading: false }),
useQueryClient: () => null,
}));
You import default as QueryClient here in App.test.js您在 App.test.js 中将默认值导入为 QueryClient
import { default as QueryClient, QueryClientProvider } from "react-query";
but react-query has no default export.但 react-query 没有默认导出。 Import it like in the App as a named import:
像在应用程序中一样将其作为命名导入导入:
import { QueryClient, QueryClientProvider } from "react-query";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.