非必填字段测试用例执行失败，请求排查问题原因

我有一个子输入组件InputField，想要编写测试用例验证输入框是否为必填项，但在执行expect(fieldNotRequired).toBeFalsy();这一行时测试失败。请问问题出在哪里？

测试代码如下：

test("Form Field Input", () => {
  render(
    <FieldTestWrapper>
      <InputField
        name={"required"}
        label={"required"}
        type={"text"}
        data-test-id="required"
        required
      />
      <InputField
        name={"not-required"}
        label={"not-required"}
        type={"text"}
        data-test-id="not-required"
      />
    </FieldTestWrapper>
  );

  const fieldRequired = screen.getByTestId("required");
  const fieldNotRequired = screen.getByTestId("not-required");

  expect(fieldRequired).toBeInTheDocument();
  expect(fieldNotRequired).toBeInTheDocument();

  expect(fieldRequired).toBeTruthy();
  expect(fieldNotRequired).toBeFalsy();
});

问题原因 #

你犯了逻辑错误：screen.getByTestId返回的是DOM元素对象，只要元素渲染到页面上，这个对象就永远是truthy值（即使没有required属性）。所以expect(fieldNotRequired).toBeFalsy()必然失败，因为这个输入框元素本身是存在的。

你要验证的是输入框是否带有required属性，而不是元素是否存在。

修正后的测试代码 #

使用Testing Library的toHaveAttribute匹配器来检查属性是否存在：

test("Form Field Input", () => {
  render(
    <FieldTestWrapper>
      <InputField
        name={"required"}
        label={"required"}
        type={"text"}
        data-test-id="required"
        required
      />
      <InputField
        name={"not-required"}
        label={"not-required"}
        type={"text"}
        data-test-id="not-required"
      />
    </FieldTestWrapper>
  );

  const fieldRequired = screen.getByTestId("required");
  const fieldNotRequired = screen.getByTestId("not-required");

  expect(fieldRequired).toBeInTheDocument();
  expect(fieldNotRequired).toBeInTheDocument();

  // 验证必填项存在required属性
  expect(fieldRequired).toHaveAttribute('required');
  // 验证非必填项不存在required属性
  expect(fieldNotRequired).not.toHaveAttribute('required');
});

或者也可以直接检查DOM元素的required属性值：

expect(fieldRequired.required).toBe(true);
expect(fieldNotRequired.required).toBe(false);

两种方式都能正确验证输入框的必填状态，避免了之前的逻辑错误。

内容的提问来源于stack exchange，提问作者ReactDeveloper