Hub*_*t S 5 reactjs react-testing-library
我是 React 测试库的新手。我想测试位于 Login.tsx 组件内的登录表单。
`
const Login = () => {
useYupTranslation();
const dispatch = useAppDispatch();
const { t } = useTranslation(["common", "loginPage", "buttons", "loginPage"]);
useDocumentTitle(t("loginPage:header"));
const navigate = useNavigate();
const location = useLocation();
const token = getTokenFromLocalStorage();
const refreshToken = getRefreshTokenFromLocalStorage();
const currentTime = new Date().getTime();
const decodedAccessToken = decodeToken<DecodedToken["accessToken"]>(token!);
const decodedRefreshToken = decodeToken<DecodedToken["refreshToken"]>(refreshToken!);
useEffect(() => {
if (location.search === "?token-expired") {
toast.error(t("loginPage:logoutNotification"), {
autoClose: false,
});
}
}, [location, t, token]);
const loginValidation = Yup.object({
email: Yup.string().email().required(),
password: Yup.string().required(),
});
const loginFormik = useFormik({
initialValues: {
email: "",
password: "",
},
onSubmit: async (values) => {
await dispatch(loginUser(values));
navigate(`${location.state ? location.state : "/start"}`);
},
validationSchema: loginValidation,
});
if (
token &&
decodedAccessToken &&
currentTime / 1000 < decodedAccessToken.exp &&
decodedRefreshToken &&
currentTime / 1000 < decodedRefreshToken.exp
) {
return <Navigate to={`${location.state ? location.state : "/start"}`} />;
}
return (
<BasePageLayout img={<Logo width={"100%"} />}>
<Box
boxShadow={3}
maxWidth={800}
marginY="0.5rem"
sx={{
display: "flex",
backgroundColor: "common.white",
borderTop: 5,
borderColor: "primary.main",
borderRadius: "8px 8px 0px 0px",
}}
>
<Box padding={2}>
<FormikProvider value={loginFormik}>
<form onSubmit={loginFormik.handleSubmit} style={{ maxWidth: "520px" }}>
<Grid container columnSpacing={2} rowSpacing={2.5}>
<Grid item xs={12} sm={12} md={12} minHeight="100px">
<TextFieldFormik id="email" label={t("common:form.email")} name="email" />
</Grid>
<Grid item xs={12} sm={12} md={12} minHeight="100px">
<PasswordFieldFormik
id="password"
label={t("common:form.password")}
name="password"
/>
</Grid>
</Grid>
<Button
type="submit"
isSubmitting={loginFormik.isSubmitting}
sx={{ marginY: "1rem" }}
>
{t("buttons:submit")}
</Button>
</form>
</FormikProvider>
</Box>
</Box>
</BasePageLayout>
);
};
export default Login;
Login component is rendered in App.tsx that looks like this:
function App() {
return (
<Suspense
fallback={
<Box minHeight={"100vh"} display="flex" justifyContent="center" alignItems="center">
<CircularProgress />
</Box>
}
>
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<BrowserRouter>
<Routes>
<Route element={<PrivateRoute />}>
<Route path="/start" element={<Start />} />
</Route>
<Route path="/login" element={<Login />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
<ToastContainer position="top-center" />
</ThemeProvider>
</MuiThemeProvider>
</Suspense>
);
}
export default App;
` 当我尝试在 Login.test.tsx 文件中渲染 Login.tsx 组件时，它只是返回 body 标签内的 div（而不是实际组件的内容），因此我什至无法访问表单输入或提交按钮测试他们。
登录.test.tsx：
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import Login from "../views/Login";
it("should render input elements", () => {
render(<Login />);
screen.debug();
});
screen.debug() 的输出只是：
<body>
<div/>
</body>
如何访问登录组件的实际内容？除 NotFoundPage 之外的其他组件也会发生同样的情况。
| 归档时间： |
|
| 查看次数： |
881 次 |
| 最近记录： |