Question

我有一个表单，其中有两个选择组件。我正在尝试编写一个测试，以检查Form是否同时渲染了两个组件。

FormComponent 的简短代码段：

export class FormComponent extends Component {

render() {
        return (
            <Form header="hdr">
                <SelectField
                            label='lable1'
                            onChange={this.handleFormChange}
                            />

                 <SelectField
                            label='label2'
                            onChange={this.handleFormChange}
                            />
           </Form>
        );
    }
}

SelectField 的简短代码段：

export const SelectField = (props) => <FormField label={props.label}>
                                        <Select />
                                      </FormField>

测试的

代码段：

import React from "react";
import { mount, render, shallow } from "enzyme";
import { FormComponent } from "../../../src/components/mdm/FormComponent";
import { SelectField } from "../../../src/components/mdm/SelectField";

describe("FormComponent", () => {
  it('renders components', () => {
    const element = shallow(<FormComponent />);
    expect(element.find(SelectField)).to.have.lengthOf(2);
  });
});

我遇到了错误：

 FAIL  test/components/mdm/FormComponent.test.jsx
  FormComponent
    ✕ renders components (74ms)

  ● FormComponent › renders components

    TypeError: Cannot read property 'have' of undefined

      18 |     const element = shallow(<FormComponent />);
    > 19 |     expect(element.find(SelectField)).to.have.lengthOf(2);

我也尝试了 mount ，但存在相同的错误。

我什至在测试console.log(element.debug())中做了 console.log ，该测试显示了组件，日志输出：

    <Form header="hdr">
          <SelectField label="lable1" onChange={[Function]} />
          <SelectField label="label2" onChange={[Function]} />

尽管expect(element.find(SelectField).exists()).toBeTruthy();有效！

Answer 1

expect(element.find(SelectField).length).toEqual(2);起作用了！

我不知道 toEqual 和 to.have.lengthOf 有什么区别，但是 toEqual 有效但是 lengthOf 不起作用。

组件中反应组件的测试计数

1 个答案: