React Recoil 路由鉴权测试执行顺序不同结果冲突问题求助

问题根因 #

你的问题根源是测试间的路由状态没有隔离。你使用HashRouter作为全局wrapper时，HashRouter会读取浏览器地址栏的hash值作为初始路由，第一个无token的测试执行后路由已经跳转到了/login，第二个有token的测试启动时，HashRouter默认沿用了跳转后的/login路径，不会触发PrivateRoute对/路径的鉴权逻辑，所以即使你传入了合法的authToken，也只会渲染登录页，导致测试失败。反过来测试顺序为2→1时，第二个无token的测试刚好匹配已经跳转的/login路径，刚好符合预期，所以能全部通过。

解决方案 #

把测试用的路由替换成MemoryRouter，并且显式指定每个测试的初始路由为/，完全隔离测试间的路由状态，具体修改如下：

1. 替换路由导入：

// 原来的HashRouter替换成MemoryRouter
import { MemoryRouter, Route, Switch } from 'react-router-dom';

2. 调整测试的render逻辑，去掉原来的{ wrapper: HashRouter }配置，给每个测试的组件外层包上指定初始路径的MemoryRouter：

// 第一个无token测试的render部分修改为
result = render(
  <MemoryRouter initialEntries={['/']}>
    <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>
  </MemoryRouter>
)

// 第二个有token测试的render部分也做对应修改
result = render(
  <MemoryRouter initialEntries={['/']}>
    <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>
  </MemoryRouter>
)

可选优化 #

你的测试里不需要额外加act包裹，@testing-library/react的render和findBy*查询内部已经自动处理了act逻辑，多余的包裹反而可能引发不必要的警告。

修改完成后，不管测试执行顺序如何，结果都会保持一致。

内容的提问来源于stack exchange，提问作者programmer1983