Question

我注意到，如果我通过将值硬编码到输入字段而没有任何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");
  });
});

Answer 1

我从eps1lon得到了有关Github问题here的答复。事实证明，在输入字段上输入错误的类型会弄乱测试并使它通过，永远不会猜到。

通过将类型设置为text而不是name，测试将按预期失败。

<input type="text" id="name" value="test" />

反应测试库输入更改测试始终通过

1 个答案: