Reactjs Formik材料用户界面和反应测试库

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

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

我遇到的问题是，查询getLabelTextBy（）不返回组件。看起来材质ui没有呈现aria标签by或for属性。不确定如何修复此错误

下面的代码也是供参考的

//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();
  });
});

//测试对象
从“React”导入React；
从“@material ui/core”导入{Button}”；
从“formik材质ui”导入{TextField}；
从“Formik”导入{Field，Form，Formik}；
从“yup”导入*作为yup；
const validationSchema=yup.object（）.shape({
名称：yup.string（）.required（“需要办公室名称”），
地址：yup.string（）.required（“地址是必需的”）
});
导出默认值（）=>(
{
设置提交（假）；
console.log（“提交表单时带有”，值）；
}}
render={（{submitForm，isSubmitting，isValid}）=>(
提交
)}
/>
);
//试验
从“React”导入React；
从“反应测试库”导入{render，firevent}；
从“/App”导入应用程序；
描述（“创建Office表单测试”，（）=>{
它（“填写所有必填字段时不应禁用按钮”，（）=>{
const{getByLabelText，getByTestId，debug}=render（）；
常量值={
“办公室名称”：“办公室”，
地址：“地址1”
};
for（常量输入值）{
const input=getByLabelText（键，{exact:false，选择器：“input”}）；
change（输入，{target:{value:values[key]}）；
}
const button=getByTestId（“submitButton”）；
expect（button.disabled）.not.toBeDefined（）；
});
});

您必须将

id

添加到

字段

，因为标签的

for

属性需要它引用的输入元素的id：

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

一个有效的例子：

---

示例不起作用，填写表单后按钮被禁用。只是尝试在codesandbox中运行测试，但失败了。