Error: Unable to find an element with the text when I try a test with Jest in React
Error: Unable to find an element with the text when I try a test with Jest in React
我是测试新闻,se,这是我的问题
我有那个简单的登录组件:
import React, { useState } from "react";
export default function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
function handleLogin(event) {
event.preventDefault();
console.log(email, password);
}
return (
<form data-testid="login-form" onSubmit={handleLogin}>
<input
data-testid="useremail"
type="email"
placeholder="Email"
value={email}
onChange={event => setEmail(event.target.value)}
/>
<input
data-testid="userpassword"
type="password"
placeholder="Password"
value={password}
onChange={event => setPassword(event.target.value)}
/>
<button onClick={handleLogin}>login</button>
</form>
);
}
这里是我的测试尝试:
import React from "react";
import Login from "../pages/Login";
import { render, fireEvent } from "@testing-library/react";
describe("Login component", () => {
it("user sent email and password", () => {
const username = "user@gmail.com";
const password = "123456";
let { getByText, getByTestId } = render(<Login />);
fireEvent.change(getByTestId("useremail"), {
target: { value: username }
});
fireEvent.change(getByTestId("userpassword"), {
target: { value: password }
});
fireEvent.submit(getByTestId("login-form"));
expect(getByTestId("login-form")).toContainElement(
getByText(username, password)
);
});
});
returns 的错误:
无法找到包含文本的元素:user@gmail.com。这可能是因为文本被多个元素打断了。在这种情况下,您可以为您的文本匹配器提供一个函数,使您的匹配器更加灵活。
getByText
看起来 by text content。 value
属性不是文本内容,只是属性之一。所以它不会通过这种方法找到输入。
此外,按要断言的事物进行搜索有点不习惯。最好通过它的静态属性找到元素,然后检查动态值:
expect(getByTestId("useremail").value).toEqual("user@gmail.com");
PS 更 "RTL-approach" 我还建议使用 getByPlaceholderText
而不是 getByTestId
.
我是测试新闻,se,这是我的问题
我有那个简单的登录组件:
import React, { useState } from "react";
export default function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
function handleLogin(event) {
event.preventDefault();
console.log(email, password);
}
return (
<form data-testid="login-form" onSubmit={handleLogin}>
<input
data-testid="useremail"
type="email"
placeholder="Email"
value={email}
onChange={event => setEmail(event.target.value)}
/>
<input
data-testid="userpassword"
type="password"
placeholder="Password"
value={password}
onChange={event => setPassword(event.target.value)}
/>
<button onClick={handleLogin}>login</button>
</form>
);
}
这里是我的测试尝试:
import React from "react";
import Login from "../pages/Login";
import { render, fireEvent } from "@testing-library/react";
describe("Login component", () => {
it("user sent email and password", () => {
const username = "user@gmail.com";
const password = "123456";
let { getByText, getByTestId } = render(<Login />);
fireEvent.change(getByTestId("useremail"), {
target: { value: username }
});
fireEvent.change(getByTestId("userpassword"), {
target: { value: password }
});
fireEvent.submit(getByTestId("login-form"));
expect(getByTestId("login-form")).toContainElement(
getByText(username, password)
);
});
});
returns 的错误: 无法找到包含文本的元素:user@gmail.com。这可能是因为文本被多个元素打断了。在这种情况下,您可以为您的文本匹配器提供一个函数,使您的匹配器更加灵活。
getByText
看起来 by text content。 value
属性不是文本内容,只是属性之一。所以它不会通过这种方法找到输入。
此外,按要断言的事物进行搜索有点不习惯。最好通过它的静态属性找到元素,然后检查动态值:
expect(getByTestId("useremail").value).toEqual("user@gmail.com");
PS 更 "RTL-approach" 我还建议使用 getByPlaceholderText
而不是 getByTestId
.