基于渲染值，两个反冲反应测试发生冲突

Question

我有一个原子，它存储具有authToken和username字符串的对象。如果存在authToken，我希望呈现受保护的内容。如果没有，我想将用户重定向到登录页面。

测试：

1. 不填充"；authToken"；并且我们期望在呈现的结果中包含登录内容
2. 填充"；authToken"；并且我期望在呈现的结果中包含受保护的内容

当按顺序2，1执行时，它们是成功的。当按顺序1,2执行时，它们将失败。

我想知道是我遗漏了什么，还是这是一个已知的问题。任何帮助都将不胜感激。

原子

import { atom } from 'recoil';
type AuthDetail = {
authToken?: string;
userName?: string;
};
const authStateAtom = atom<AuthDetail>({
key: 'auth-state',
default: {},
});
export { authStateAtom };
export type { AuthDetail };

私有路由

import React, { FC } from 'react';
import { authStateAtom } from './atom';
import { Redirect, Route, RouteProps } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
const PrivateRoute: FC<RouteProps> = ({ children, ...rest }) => {
const authState = useRecoilValue(authStateAtom);
return (
<Route
{...rest}
render={({ location }) =>
authState.authToken ? (
children
) : (
<Redirect
to={{
pathname: '/login',
state: { from: location },
}}
/>
)}
/>
);
}
export { PrivateRoute };

测试

import { act, render, RenderResult } from '@testing-library/react';
import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import { MutableSnapshot, RecoilRoot } from 'recoil';
import { authStateAtom } from './atom';
import { PrivateRoute } from './PrivateRoute';
describe('PrivateRoute:', () => {
const protectedComponent = 'protected-component';
const loginComponent = 'login-component';
it('redirects to login if not authenticated', async () => {
let result: RenderResult;
await act(async () => {
result = render(
<RecoilRoot>
<Switch>
<Route exact={true} path="/login">
<div data-testid={loginComponent}>LOGIN COMPONENT</div>
</Route>
<PrivateRoute path="/">
<div data-testid={protectedComponent}>PROTECTED COMPONENT</div>
</PrivateRoute>
</Switch>
</RecoilRoot>,
{ wrapper: HashRouter },
)
});
// @ts-ignore
expect(result.getByTestId(loginComponent)).toBeInTheDocument();
// @ts-ignore
expect(result.queryByTestId(protectedComponent)).not.toBeInTheDocument();
});

it('renders the component if authenticated', async () => {
const initialRecoilState = (snap: MutableSnapshot) => {
snap.set(authStateAtom, { authToken: '1234' });
};
let result: RenderResult;
await act(async () => {
result = render(
<RecoilRoot initializeState={initialRecoilState}>
<Switch>
<Route exact={true} path="/login">
<div data-testid={loginComponent}>LOGIN COMPONENT</div>
</Route>
<PrivateRoute path="/">
<div data-testid={protectedComponent}>PROTECTED COMPONENT</div>
</PrivateRoute>
</Switch>
</RecoilRoot>,
{ wrapper: HashRouter },
);
});
// @ts-ignore
expect(await result.findByTestId(protectedComponent)).toBeInTheDocument();
// @ts-ignore
expect(result.queryByTestId(loginComponent)).not.toBeInTheDocument();
});

});

https://codesandbox.io/s/vigilant-shamir-27s35?file=/src/PrivateRoute.test.tsx

Answer 1

使用<Router>进行测试时，环境中的window.history可能会受到污染。如果你只运行其中一个测试，另一个会通过。但当你一起运行它们时，你的第一个测试会将URL设置为"/login"。您将在第二次测试中开始使用该URL。

根据react路由器的测试指南，您应该用<MemoryRouter>封装组件以保护全局环境。

以下是两个测试都通过的codesandbox链接：https://codesandbox.io/s/frosty-rhodes-xxuwk?file=/src/PrivateRoute.test.tsx