Formik Material UI 和 react 测试库答案

【问题标题】：Formik Material UI and react testing libraryFormik Material UI 和 react 测试库
【发布时间】：2023-03-13 07:31:01
【问题描述】：

我发现很难使用反应测试库并理解我需要使用的查询才能选择我需要测试的组件。当 DOM 使用 material ui 和 formik 等框架变得越来越冗长时，查询过于简单。

我创建了一个代码沙箱来说明问题。你可以在那里检查失败的测试。

https://codesandbox.io/embed/px277lj1x

我遇到的问题是，查询 getLabelTextBy() 不返回组件。看起来 aria 标签 by 或 for 属性未由材质 ui 呈现。不知道如何解决这个错误。

下面的代码也供参考

//Subject under test

import React from "react";
import { Button } from "@material-ui/core";
import { TextField } from "formik-material-ui";
import { Field, Form, Formik } from "formik";
import * as yup from "yup";

const validationSchema = yup.object().shape({
  name: yup.string().required("Office name is required"),
  address: yup.string().required("Address is required")
});

export default () => (
  <Formik
    initialValues={{
      name: "",
      address: ""
    }}
    validationSchema={validationSchema}
    onSubmit={(values, { setSubmitting }) => {
      setSubmitting(false);
      console.log("form is submitted with", values);
    }}
    render={({ submitForm, isSubmitting, isValid }) => (
      <Form>
        <Field
          label="Office Name"
          name="name"
          required
          type="text"
          component={TextField}
        />
        <Field
          label="Address Line 1"
          name="addressLine1"
          type="text"
          component={TextField}
        />
        <Button
          variant="contained"
          color="primary"
          fullWidth={false}
          size="medium"
          disabled={isSubmitting || !isValid}
          onClick={submitForm}
          data-testid="submitButton"
        >
          Submit
        </Button>
      </Form>
    )}
  />
);


// Test
import React from "react";
import { render, fireEvent } from "react-testing-library";
import App from "./App";

describe("Create Office Form tests", () => {
  it("button should not be disabled when all required fields are filled up", () => {
    const { getByLabelText, getByTestId, debug } = render(<App />);
    const values = {
      "office name": "office",
      address: "address 1"
    };
    for (const key in values) {
      const input = getByLabelText(key, { exact: false, selector: "input" });
      fireEvent.change(input, { target: { value: values[key] } });
    }
    const button = getByTestId("submitButton");
    expect(button.disabled).not.toBeDefined();
  });
});

【问题讨论】：

标签： reactjs material-ui formik react-testing-library

【解决方案1】：

您必须将id 添加到您的Field，因为标签的for 属性需要它所引用的输入元素的ID：

        <Field
          id="myName"
          label="Office Name"   
          name="name"
          required
          type="text"
          component={TextField}
        />

一个工作示例：

【讨论】：

示例不起作用，填写表单后按钮被禁用。刚刚尝试在代码沙箱中运行测试，但它们失败了。

【解决方案2】：

几件事。库的创建者不建议使用 { getByLabelText, getByTestId, debug }。你应该使用screen.getByLabelText()。

如果有变化，它可能不会等待新的渲染，所以最好等待它或将期望包装在 waitFor 方法中。

另外，expect(button.disabled).not.toBeDefined() 不应该是正确的。我想你只是在检查按钮是否被禁用，对吧？所以你可以使用expect(button).toBeDisabled()或not.toBeDisabled()

至少要对其进行测试，我认为您应该取消 for 循环并正常检查它。您可以使用 screen.debug(component) 在某些操作后显示 HTML。

【讨论】：