集成测试Jest，到达路由器导航功能：组件不会随Jest更改

问题描述

我有一个登录组件，一个受保护的路由（用户设置），一个ProtectedRoute组件和一个路由表。 ProtectedRoute保持正常状态：如果redux存储中有一个auth令牌，它将把您转发到设置。（在实际应用中，路线更多，它会记住您尝试访问的页面，并且在存在auth令牌后，它会将您转发到尝试访问的页面。）

const Routing = () => <Router basepath="/app">
  <Login default path="/login"/>
  <PrivateRoute path="/settings" component={Settings}/>
</Router>

// After login,it stores auth token in redux store
const Login = () => {
  const auth = () => loginApiCall().then((authToken) => storetokenInRedux(authToken)
  return (
    <Button onClick="submit">Login</Button>
  )
}

const Settings = () => <div>Settings</div>

const ProtectedRoute = ({component,location,...rest}) => {
  const token = useSelector(_authToken.get)
  const attemptedPage = useSelector(_attemptedPage.get) // Option<string>
  const kickToLogin = () => {
    clearUserData()
    putAttemptedPageUrlInReduxStore(location.pathname)
    navigate('/app/login')
  }
  useEffect(() => {
    if(!token) kickToLogin()
  },[token])
  return pipe(token,fold(() => <></>,() => component(rest))) // renders component iff there's an authtoken in redux store
}

我的问题是我想进行集成测试。您在下面看到的render是在React Testing Library页面上看到的版本，用于在测试中将路由注入到到达路由器实例中。 waitFor等到某些代码返回true后再继续。在等待一些异步事情发生之前，IT是一个很好的等待，然后继续进行测试。

describe('routing test',() => {
  test('if load protected route without authtoken,forwards to login',() => {
    render('<Routing/>',{ route: '/app/settings' }) // injects this route into reach router
    await waitFor(() => expect(screen.getByLabelText('Email address')).not.toBeNull())
  })
})

我的问题是，我在运行以下命令时遇到此错误：Error: Unable to find a label with Email address（登录页面具有带有该字符串的输入标签）。调试到屏幕的结果是

<body>
      <div>
        <div
          style="outline: none;"
          tabindex="-1"
        />
      </div>
    </body>

所以它似乎什么也没渲染。如果我执行路由/ app / login而不是/ app / settings，那么它将正确加载登录页面，并且我的getByLabelText成功。

如果我使用调试器逐步执行代码，则可以看到navigate函数被调用。

我发现某人遇到同一问题，因此this出现了问题。但这对我不适用，因为我不仅在测试路由：还在进行集成测试。我需要进一步登录并确保应用程序将我转发到先前请求的页面。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）