Question

我有以下React组件

import React from "react";
import { Form, Input } from "antd";

class FormDataImportProtocol extends React.Component {
  callMyMethod = (id) => {
    //...code...
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        callMyMethod(values.dummyvalue);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <>
        <h2>Heading</h2>
        <Form layout="horizontal" onSubmit={this.handleSubmit}>
          <Form.Item label="dummy">
            {getFieldDecorator("dummy", { initialValue: "dummy" })(
              <Input />
            )}
          </Form.Item>
        </Form>
      </>
    );
  }
}

export default Form.create()(FormDataImportProtocol);

我想测试是否调用了callMyMethod（str）。问题是Form.create（）（...）

的包装

如何在测试中解开Form.create（）？感谢您的任何建议。

Answer 1

如果您不需要测试中的<add key="ida:AadInstance" value="https://tenantName.b2clogin.com/{0}/v2.0/.well-known/openid-configuration?p={1}" /> <add key="ida:Tenant" value="tenantName.onmicrosoft.com" /> <add key="ida:ClientId" value="clientId" /> <add key="ida:SignUpSignInPolicyId" value="policyNAme" />  <add key="api:ReadScope" value="read" /> <add key="api:WriteScope" value="write" /> },，您可以这样做

Form.create()

Answer 2

我再次阅读了文档，并找到了解决问题的方法：

describe("Test suite", () => {
  let  formRef;

  it("My test case", () => {
    const EnhancedForm = Form.create()(FormDataImportProtocol);
    const wrapper = mount(
      <EnhancedForm wrappedComponentRef={form => (formRef = form)} />
    );

    // formRef is my ref which I need for my spy:
    spy(formRef, "createDataImport");
  });
});

谢谢您的帮助。

将Ant Design与Form.create一起使用时的组件的单元测试

2 个答案: