[英]How to override default mock of useParams in jest
我必须测试一个基于 url 路径参数中的国家和语言呈现的组件。 所以我想根据参数的变化正确渲染组件。
我是 mocking 的 useParams 并设置了一些适用于大多数测试的必需值。 现在对于特定情况,我需要更改参数。
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: () => ({
language: 'IT'
})
}));
如何覆盖测试中的语言?
谢谢
您可以使用<MemoryRouter initialEntries>
代替 mocking useParams
,例如:
MyComponent.js
import { useParams } from "react-router-dom";
function MyComponent() {
const { language } = useParams();
return (
<div>
<h2>My Component page</h2>
<p>language: {language}</p>
</div>
);
}
MyComponent.test.js
import { MemoryRouter } from "react-router-dom";
import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import App from "./App";
test("Home: Go to `MyComponent: en`", async () => {
render(
<MemoryRouter initialEntries={["/"]}>
<App />
</MemoryRouter>
);
expect(screen.getByText("Home page")).toBeInTheDocument();
fireEvent.click(screen.getByText("My Component: en"));
expect(screen.getByText("language: en")).toBeInTheDocument();
expect(screen.queryByText("language: fr")).not.toBeInTheDocument();
});
test("MyComponent: en", async () => {
render(
<MemoryRouter initialEntries={["/myComponent/en"]}>
<App />
</MemoryRouter>
);
expect(screen.getByText("language: en")).toBeInTheDocument();
});
test("MyComponent: fr", async () => {
render(
<MemoryRouter initialEntries={["/myComponent/fr"]}>
<App />
</MemoryRouter>
);
expect(screen.getByText("language: fr")).toBeInTheDocument();
});
在线演示
根据 Jest 文档上的此页面,尝试以下操作
// create a separate mock function that you can access from tests
// NOTE: the name must start with `mock` and is case sensitive
const mockUseParams = jest.fn().mockReturnValue({
language: 'IT',
});
// mock the module using the mock function created above
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: mockUseParams,
}));
it('should behave differently when the params change', () => {
mockUseParams.mockReturnValueOnce({
language: 'EN',
});
// test implementation
});
是的 在你的 App 组件中包含路由器; 始终在您的测试中渲染 App 组件(不要像 Locations 这样的子组件); 通过查找并单击页面上的链接导航到您的测试页面 这种方法的优点:您无需阅读本文的 rest(并且您的测试设置将不那么复杂)。 缺点:您不能在测试设置中立即加载路由历史记录(当前页面和以前的页面); 您需要 go 通过所有用户交互来构建历史记录。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.