1

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

如果我们Canada从国家下拉列表中选择，如果省和邮政编码字段为空，则在模糊上显示错误消息。

我正在测试的 React 最终形式是：

<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

4

2 回答 2

1

有一些原因你不能通过测试

似乎 span 没有将文本内容应用为可访问名称，您可以使用 aria-label 为其设置可访问名称，更多信息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();
  });
});

编辑 react-ts-unit-test-example

于 2020-07-09T16:06:56.340 回答
0

findByRole()通过name. 我会使用getByText(). 另请注意，您必须“模糊”Province 字段以显示其错误，因为您仅在“触摸”该字段时才显示错误。

编辑 react-ts-unit-test-example

于 2020-07-07T04:29:58.043 回答