在测试中为BrowserRouter设置路由

Question

我有一个测试用例，我需要在注册页面(/signup)上开始，并且在成功注册后，应用程序应该导航到主页(/)。我目前正在使用MemoryRouter将初始路由设置为/signup，一切工作正常。见下文:

import React from 'react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter } from 'react-router';
import { Route, Routes } from 'react-router-dom';
import { render, screen } from '../../test/test-utils';
import { SignUpPage } from './SignUpPage';
const MockHomePage = () => <div>MockHomePage</div>;
describe('<SignUp />', () => {
test('navigates to Home page on successful signup', async () => {
render(
<MemoryRouter initialEntries={['/signup']}>
<Routes>
<Route path="/" element={<MockHomePage />} />
<Route path="/signup" element={<SignUpPage />} />
</Routes>
</MemoryRouter>
);
// Enter valid user info and submit form
userEvent.type(screen.getByLabelText('Full Name'), 'John Smith');
userEvent.type(screen.getByLabelText('Email'), '[e-mail]');
userEvent.type(screen.getByLabelText('Password'), 'let-me-in');
userEvent.type(screen.getByLabelText('Confirm Password'), 'let-me-in');
userEvent.click(screen.getByText('Sign up'));
// Expect to see the Home page
expect(await screen.findByText('MockHomePage')).toBeInTheDocument();
});
});

然而，我想在我的测试中使用BrowserRouter而不是MemoryRouter(我知道这是推荐的方式，因为它更接近真正的应用程序将使用)。不幸的是，BrowserRouter没有initialEntries道具(我使用React Router v6 beta.7)。有没有办法强制BrowserRouter从/signup开始?

我尝试了这样的位置API:

window.location.href = 'http://localhost:3000/signup';

然而，我得到一个jsdom错误说这个API没有实现:

Error: Not implemented: navigation (except hash changes)
at module.exports (/Users/naresh/projects/accelerated-news/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)

还有别的办法吗?

使用react-router-domv6.

Answer 1

我相信你需要使用window.history.pushState()，所以它看起来像这样:

test('navigates to Home page on successful signup', async () => {
window.history.pushState({}, '', '/signup')
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<MockHomePage />} />
<Route path="/signup" element={<SignUpPage />} />
</Routes>
</BrowserRouter>
);
// etc..
});