[英]Mock next/link with Jest in Next.js
如何在 Next JS 中用玩笑从“next/link”模拟链接组件并在单击链接元素后检查重定向路径?
这是一个带有测试的示例组件:
import Link from "next/link";
export default function Nav() {
return (
<div>
<Link href="/login">
<span>Click here</span>
</Link>
</div>
)
}
describe("Nav", () => {
it("redirects correctly", async () => {
render(<Nav />)
fireEvent.click(screen.getByText("Click here"));
// check if redirect to href prop works as expected
});
});
您可以使用 RouterContext 提供程序包装您的测试并将模拟路由器作为值传递
import createMockRouter from 'src/test-utils/createMockRouter';
import { RouterContext } from 'next/dist/shared/lib/router-context';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
describe("Nav", () => {
let router = createMockRouter({});
it("redirects correctly", async () => {
render(
<RouterContext.Provider value={router}>
<Nav />
</RouterContext.Provider>)
waitFor(() => {
fireEvent.click(screen.getByText("Click here"));
expect(router.push).toHaveBeenCalledWith('/login');
});
});
});
并像这样在您的实用程序中创建一个 createMockRouter 实用程序。
import { NextRouter } from 'next/router';
const createMockRouter = (router: Partial<NextRouter>): NextRouter => {
return {
basePath: '',
pathname: '/',
route: '/',
query: {},
asPath: '/',
back: jest.fn(),
beforePopState: jest.fn(),
prefetch: jest.fn(),
push: jest.fn(),
reload: jest.fn(),
replace: jest.fn(),
events: {
on: jest.fn(),
off: jest.fn(),
emit: jest.fn(),
},
isFallback: false,
isLocaleDomain: false,
isReady: true,
defaultLocale: 'en',
domainLocales: [],
isPreview: false,
...router,
};
};
export default createMockRouter;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.