如何解决集成测试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 举报,一经查实,本站将立刻删除。