我有一個 React SignUp 組件。我正在用 Jest 作為運行器和測驗庫撰寫測驗來撰寫測驗。
注冊組件代碼（使用物化進行樣式化）是：
import React, { useState } from "react";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import Icon from "@material-ui/core/Icon";
import { makeStyles } from "@material-ui/core/styles";
import { create } from "./api-user.js";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import { Link } from "react-router-dom";
const useStyles = makeStyles((theme) => ({
card: {
maxWidth: 600,
margin: "auto",
textAlign: "center",
marginTop: theme.spacing(5),
paddingBottom: theme.spacing(2),
},
error: {
verticalAlign: "middle",
},
title: {
marginTop: theme.spacing(2),
color: theme.palette.openTitle,
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 300,
},
submit: {
margin: "auto",
marginBottom: theme.spacing(2),
},
}));
export default function Signup() {
const classes = useStyles();
const [values, setValues] = useState({
name: "",
password: "",
email: "",
open: false,
error: "",
});
const handleChange = (name) => (event) => {
setValues({ ...values, [name]: event.target.value });
};
const clickSubmit = () => {
const user = {
name: values.name || undefined,
email: values.email || undefined,
password: values.password || undefined,
};
create(user).then((data) => {
if (data.error) {
setValues({ ...values, error: data.error });
} else {
setValues({ ...values, error: "", open: true });
}
});
};
return (
<div>
<Card className={classes.card}>
<CardContent>
<Typography variant="h6" className={classes.title}>
Sign Up
</Typography>
<TextField
role="name"
id="name"
label="Name"
className={classes.textField}
value={values.name}
onChange={handleChange("name")}
margin="normal"
/>
<br />
<TextField
role="email"
id="email"
type="email"
label="Email"
className={classes.textField}
value={values.email}
onChange={handleChange("email")}
margin="normal"
/>
<br />
<TextField
role="password"
id="password"
type="password"
label="Password"
className={classes.textField}
value={values.password}
onChange={handleChange("password")}
margin="normal"
/>
<br />{" "}
{values.error && (
<Typography component="p" color="error">
<Icon color="error" className={classes.error}>
error
</Icon>
{values.error}
</Typography>
)}
</CardContent>
<CardActions>
<Button
color="primary"
variant="contained"
onClick={clickSubmit}
className={classes.submit}
>
Submit
</Button>
</CardActions>
</Card>
<Dialog open={values.open} disableBackdropClick={true}>
<DialogTitle>New Account</DialogTitle>
<DialogContent>
<DialogContentText>
New account successfully created.
</DialogContentText>
</DialogContent>
<DialogActions>
<Link to="/signin">
<Button color="primary" autoFocus="autoFocus" variant="contained">
Sign In
</Button>
</Link>
</DialogActions>
</Dialog>
</div>
);
}
我正在嘗試呈現組件，然后驗證表單是否具有Name、Email和 Password輸入。測驗檔案如下所示：
import React from "react";
import { screen, render, cleanup, fireEvent } from "@testing-library/react";
import SignUp from "./Signup";
describe("App component", () => {
beforeAll(() => {
render(<SignUp />);
});
it("should have the input field for name", () => {
const nameInput = screen.getByLabelText("Name");
expect(nameInput).toBeInTheDocument();
});
it("should have the input field for email", () => {
const emailInput = screen.getByLabelText("Email");
expect(emailInput).toBeInTheDocument();
});
it("should have the input field for password", () => {
const passwordInput = screen.getByLabelText("Password");
expect(passwordInput).toBeInTheDocument();
});
afterAll(cleanup);
});
問題：無論我測驗輸入的順序如何，第一個案例/測驗總是通過。該.getByLabelText查詢能夠找到第一個塊的組件，但it在接下來的 2 個塊中失敗。
為上述檔案運行測驗的訊息是：
FAIL client/user/SignUp.test.js
App component
? should have the input field for name (13 ms)
? should have the input field for email (3 ms)
? should have the input field for password (1 ms)
● App component ? should have the input field for email
TestingLibraryElementError: Unable to find a label with the text of: Email
Ignored nodes: comments, script, style
<body />
12 | });
13 | it("should have the input field for email", () => {
> 14 | const emailInput = screen.getByLabelText("Email");
| ^
15 | expect(emailInput).toBeInTheDocument();
16 | });
17 | it("should have the input field for password", () => {
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:40:19)
at getAllByLabelText (node_modules/@testing-library/dom/dist/queries/label-text.js:116:38)
at node_modules/@testing-library/dom/dist/query-helpers.js:62:17
at node_modules/@testing-library/dom/dist/query-helpers.js:111:19
at Object.getByLabelText (client/user/SignUp.test.js:14:31)
● App component ? should have the input field for password
當我將訂單切換為：
it("should have the input field for email", () => {
const emailInput = screen.getByLabelText("Email");
expect(emailInput).toBeInTheDocument();
});
it("should have the input field for name", () => {
const nameInput = screen.getByLabelText("Name");
expect(nameInput).toBeInTheDocument();
});
it("should have the input field for password", () => {
const passwordInput = screen.getByLabelText("Password");
expect(passwordInput).toBeInTheDocument();
});
訊息更改為：
FAIL client/user/SignUp.test.js
App component
? should have the input field for email (19 ms)
? should have the input field for name (8 ms)
? should have the input field for password (6 ms)
● App component ? should have the input field for name
TestingLibraryElementError: Unable to find a label with the text of: Name
Ignored nodes: comments, script, style
<body />
13 | });
14 | it("should have the input field for name", () => {
> 15 | const nameInput = screen.getByLabelText("Name");
| ^
16 | expect(nameInput).toBeInTheDocument();
17 | });
18 | it("should have the input field for password", () => {
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:40:19)
at getAllByLabelText (node_modules/@testing-library/dom/dist/queries/label-text.js:116:38)
at node_modules/@testing-library/dom/dist/query-helpers.js:62:17
at node_modules/@testing-library/dom/dist/query-helpers.js:111:19
at Object.getByLabelText (client/user/SignUp.test.js:15:30)
● App component ? should have the input field for password
TestingLibraryElementError: Unable to find a label with the text of: Password
Ignored nodes: comments, script, style
<body />
17 | });
18 | it("should have the input field for password", () => {
> 19 | const passwordInput = screen.getByLabelText("Password");
| ^
20 | expect(passwordInput).toBeInTheDocument();
21 | });
22 | afterAll(cleanup);
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:40:19)
at getAllByLabelText (node_modules/@testing-library/dom/dist/queries/label-text.js:116:38)
at node_modules/@testing-library/dom/dist/query-helpers.js:62:17
at node_modules/@testing-library/dom/dist/query-helpers.js:111:19
at Object.getByLabelText (client/user/SignUp.test.js:19:34)
正如您現在所看到的，emailworks 與其他 2( nameand email)的查詢
更有趣的是，當我在一個it塊中使用所有 3 個查詢時，所有測驗都通過了：
it("should have the input field for name", () => {
const nameInput = screen.getByLabelText("Name");
expect(nameInput).toBeInTheDocument();
const emailInput = screen.getByLabelText("Email");
expect(emailInput).toBeInTheDocument();
const passwordInput = screen.getByLabelText("Password");
expect(passwordInput).toBeInTheDocument();
});
并驗證所有 3 個查詢，您可以測驗（SodeSandBox：https://codesandbox.io/s/react-testing-library-material-ui-select-forked-5rixw3?file=/src/App.test.js： 254-891 ) 它通過將引數更改為查詢，如果將其更改為喜歡，它將失敗const emailInput = screen.getByLabelText("Email-failing");
有人能告訴我，為什么測驗庫在同一個塊而不是在不同的塊中作業嗎？以及如何測驗三個輸入？我還嘗試了不同.getByRole 的查詢方法，例如角色屬性，它以相同的方式運行，即在單個塊中作業，第二個和第三個塊/測驗失敗。
uj5u.com熱心網友回復：
您在所有測驗之前渲染您的組件。您應該改為在每個測驗中渲染組件。不要在 beforeAll 塊中使用 render，在每個“it”塊中使用它。
import React from "react";
import { screen, render, cleanup, fireEvent } from "@testing-
library/react";
import SignUp from "./Signup";
describe("App component", () => {
it("should have the input field for name", () => {
render(<SignUp />);
const nameInput = screen.getByLabelText("Name");
expect(nameInput).toBeInTheDocument();
});
it("should have the input field for email", () => {
render(<SignUp />);
const emailInput = screen.getByLabelText("Email");
expect(emailInput).toBeInTheDocument();
});
it("should have the input field for password", () => {
render(<SignUp />);
const passwordInput = screen.getByLabelText("Password");
expect(passwordInput).toBeInTheDocument();
});
afterAll(cleanup);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/534790.html