Я заметил, что если я сломал форму, жестко закодировав значение в поле ввода и не имея никакого onChange - мои тесты все еще проходили!
Я тоже попытался использовать userEvent, но тест все еще проходит нормально. Что я здесь не так делаю? Я явно не могу изменить значение в браузере, оно привязано к жестко заданному значению.
Я также создал песочницу, показывающую проблему: https://codesandbox.io/s/dank-wave-hlsfp
Реагирующий компонент:
import React from "react";
const RegisterFormExample = () => (
<form>
<label htmlFor="name">Full name</label>
<input type="name" id="name" value="this does not break a test" />
</form>
);
export default RegisterFormExample;
Шутник:
import React from "react";
import { render, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import RegisterForm from "components/RegisterFormExample";
describe("RegisterForm", () => {
test("full name input", async () => {
const { getByLabelText } = render(<RegisterForm />);
const input = getByLabelText(/full name/i);
//This passes
fireEvent.change(input, {
target: {
value: "Test Example",
},
});
expect(input).toHaveValue("Test Example");
//This is passing too
await userEvent.type(input, "Test Example");
expect(input).toHaveValue("Test Example");
});
});