Javascript react测试库输入更改测试始终通过

我注意到，如果我通过向输入字段硬编码一个值来破坏我的表单，并且没有任何onChange，那么我的测试仍然通过

我也尝试过使用userEvent，但是测试仍然通过得很好。 我做错了什么？在浏览器中，我显然根本无法更改该值，它被固定在硬编码的值上

我已经创建了一个沙盒，其中也显示了该问题：

反应组分：

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;

从“React”导入React；
常量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");
  });
});

从“React”导入React；
从“@testing library/react”导入{render，firevent}”；
从“@测试库/用户事件”导入userEvent；
从“组件/注册表执行示例”导入注册表执行；
描述（“注册执行”，（）=>{
测试（“全名输入”，异步（）=>{
常量{getByLabelText}=render（）；
const input=getByLabelText（/full name/i）；
//这过去了
fireEvent.change（输入{
目标：{
值：“测试示例”，
},
});
expect（input）.toHaveValue（“测试示例”）；
//这也在过去
wait userEvent.type（输入，“测试示例”）；
expect（input）.toHaveValue（“测试示例”）；
});
});

我从爱普生那里得到了关于Github问题的答案。 事实证明，在输入字段上设置错误的类型可能会使测试陷入混乱，并使其通过，这是绝对不会想到的

通过将type设置为

text

而不是

name

，测试将按预期失败

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

---

我从爱普生那里得到了关于Github问题的答案。 事实证明，在输入字段上设置错误的类型可能会使测试陷入混乱，并使其通过，这是绝对不会想到的

通过将type设置为

text

而不是

name

，测试将按预期失败

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

从外观上看，在您的测试中，您正在将值设置为“test Example”，然后期望它的值为“test Example”，因此它当然会通过。@George-在沙盒中的浏览器中尝试该表单，它不会起作用，因为设置了硬编码的值。当我更改测试示例字符串时，我的测试失败了。你用的是什么浏览器？某些浏览器可能无法通过编程触发事件（即使可以设置输入值）。无论如何，这个测试毫无意义。您只测试fireEvent.change是否有效，与您的代码无关。从外观上看，您在测试中将值设置为“test-Example”，然后期望它的值为“test-Example”，因此它当然会通过。@George-在沙盒中的浏览器中尝试该表单，它不起作用，因为有一个硬编码的值set.test在我更改测试示例字符串时失败。你用的是什么浏览器？某些浏览器可能无法通过编程触发事件（即使可以设置输入值）。无论如何，这个测试毫无意义。您只是测试fireEvent.change是否有效，与您的代码无关。