无法通过可访问的名称找到警报

Question

我正在编写一个测试来满足以下业务规则：

If we select Canada from the country dropdown, show error messages on blur for the province and postal code fields if they are blank.

我正在测试的 React Final Form 是：

<Form
  onSubmit={onSubmit}
  validate={values => {
    const errors: ValidationErrors = {};

    if (!values.country) {
      errors.country = "Country must be selected";
    }

    if (values.country === "Canada" && !values.province) {
      errors.province = "Province must be provided";
    }

    if (values.country === "Canada" && !values.postalCode) {
      errors.postalCode = "Postal code must be provided";
    }
    return errors;
  }}
  render={({
    ...
  }) => (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="country">Country</label>
        <br />
        <Field<string> id="country" name="country" component="select">
          <option />
          <option value="Canada">Canada</option>
          <option value="US">US</option>
        </Field>
      </div>

      <Condition when="country" is="Canada">
        <div>
          <label htmlFor="province">Province</label>
          <br />
          <Field id="province" name="province" component="input" />
          <Error name="province" />
        </div>
        <div>
          <label htmlFor="postalCode">Postal Code</label>
          <br />
          <Field id="postalCode" name="postalCode" component="input" />
          <Error name="postalCode" />
        </div>
      </Condition>
      ...
    </form>
  )}

我正在编写的测试如下所示：

describe("Contact form", () => {
test("should show errors if Canada is seledted but province and postal code are blank", async () => {
const { getByLabelText, findByRole } = render(<ContactForm />);

fireEvent.change(getByLabelText("Country"), {
  target: { value: "Canada" }
});

fireEvent.change(getByLabelText("Province"), {
  target: { value: "" }
});

fireEvent.change(getByLabelText("Postal Code"), {
  target: { value: "" }
});

fireEvent.blur(getByLabelText("Postal Code"));

const postalAlert = await findByRole("alert", {
  name: "Postal code must be provided"
});
expect(postalAlert).toBeInTheDocument();

const provinceAlert = await findByRole("alert", {
  name: "Province must be provided"
});
expect(provinceAlert).toBeInTheDocument();

我正在尝试触发错误消息 - 用 role="alert" 渲染出来 - 但我的测试失败了：Unable to find role="alert"

现在，如果我删除我尝试过滤的 name 属性，则会找到 alert：

const postalAlert = await findByRole("alert"); // SUCCESS

我可以使用 findAllByRole 检索警报并遍历它们，但我真的只想使用可访问的名称明确查询每个警报并断言它们在文档中。

我在调试屏幕的时候看到了这个元素，我只想弄清楚如何直接用它的角色和名称来查询它：

<span
      role="alert"
      style="color: rgb(153, 0, 0);"
    >
      Postal code must be provided
</span>

示例表格：https://codesandbox.io/s/react-ts-unit-test-example-6scjc?file=/src/ContactForm.test.tsx

Answer 1

findByRole() 不能像传递 name 那样工作。我会使用 getByText() 编写此测试。另请注意，您必须“模糊”Province 字段以显示其错误，因为您仅在“触摸”该字段时显示错误。

Answer 2

无法通过测试的原因有一些

好像span没有将文本内容应用为可访问的名称，你可以使用aria-label为其设置可访问的名称，more information here

export const Error = (props: Props) => {
  const {
    meta: { touched, error }
  } = useField(props.name, { subscription: { touched: true, error: true } });
  return touched && error ? (
    // add aria-label to set accessiable name for span
    <span aria-label={error} role="alert" style={{ color: "#900" }}>
      {error}
    </span>
  ) : null;
};

您只调用模糊“邮政编码”，但您的测试也包含省份错误，实施是您在模糊省份输入时显示省份错误，因此您需要将其添加到您的测试中

import * as React from "react";
import { render, fireEvent } from "@testing-library/react";
import { ContactForm } from "./ContactForm";

describe("Contact form", () => {
  test("should show errors if Canada is seledted but province and postal code are blank", async () => {
    const { getByLabelText, findByRole } = render(<ContactForm />);

    fireEvent.change(getByLabelText("Country"), {
      target: { value: "Canada" }
    });

    fireEvent.change(getByLabelText("Province"), {
      target: { value: "" }
    });

    fireEvent.change(getByLabelText("Postal Code"), {
      target: { value: "" }
    });

    // you only blur "Postal Code"
    fireEvent.blur(getByLabelText("Postal Code"));

    const postalAlert = await findByRole("alert", {
      name: "Postal code must be provided"
    });
    expect(postalAlert).toBeInTheDocument();
    
    // This will not shown because you have not called blur Province
    // comment this or add the line below to pass the test
    // fireEvent.blur(getByLabelText("Province"));
    const provinceAlert = await findByRole("alert", {
      name: "Province must be provided"
    });
    expect(provinceAlert).toBeInTheDocument();
  });
});

无法通过可访问的名称找到警报

Cannot find alert by accessible name

reactjs

final-form

react-final-form

react-testing-library

testing-library