Question

我是第一次在React中编写测试，我想知道是否有一种方法可以测试父组件中子组件的子组件数量，所以要说清楚，这是如何组件看起来，我已将其缩减为与此问题相关的部分：

<Modal>
     <RadioGroupField direction="vertical" name={`${fieldId}.resultat`} bredde="M">
          <RadioOption label={{ id: 'UttakInfoPanel.SykdomSkadenDokumentertAngiAvklartPeriode' }} value />
          <RadioOption label={{ id: 'UttakInfoPanel.SykdomSkadenIkkeDokumentert' }} value={false} />
     </RadioGroupField>
</Modal>

因此，当我为Modal组件编写测试时，我想检查RadioGroupField组件是否有正确数量的子组件：

import React from 'react';
import { expect } from 'chai';
import { shallowWithIntl } from 'testHelpers/intl-enzyme-test-helper';

import { Modal} from './Modal';

const periode = {
  fom: '2018-01-01',
  tom: '2018-03-01',
};
it('should show modal component', () => {
    const wrapper = shallowWithIntl(<Modal
      fieldId="periode[0]"
      resultat={undefined}
      periode={periode}
    />);

    const radioGroupField = wrapper.find('RadioGroupField');
    expect(radioGroupField).to.have.length(1);

  });

我该如何编写该测试？

更新

我尝试使用名称而不是字符串作为组件和潜水方法，但突然间我收到错误：

ReferenceError：未定义RadioGroupField

这是我的测试：

it('skal vise sykdom og skade periode', () => {
    const wrapper = shallowWithIntl(<Modal
      fieldId="periode[0]"
      resultat={undefined}
      periode={periode}
    />);

    const textAreaField = wrapper.find('TextAreaField');
    const undertekst = wrapper.find('Undertekst');
    const radioGroupField = wrapper.find('RadioGroupField');
    const fieldArray = wrapper.find('FieldArray');
    const hovedknapp = wrapper.find('Hovedknapp');
    const knapp = wrapper.find('Knapp');
    const radioGroupFieldComponent = wrapper.find(RadioGroupField).dive();
    expect(radioGroupFieldComponent.children()).to.have.length(2);
    expect(textAreaField).to.have.length(1);
    expect(undertekst).to.have.length(1);
    expect(radioGroupField).to.have.length(1);
    expect(fieldArray).to.have.length(1);
    expect(hovedknapp).to.have.length(1);
    expect(knapp).to.have.length(1);
  });

Answer 1

为了引用组件，请使用其名称而不是文档中的String：

dest = 4294967294 = 0xFFFFFFFE

我想检查一下RadioGroupField组件的子组件数是否正确：

使用wrapper.find(Foo) // Foo component, not 'Foo' API

中记录的children()

enzyme

参考文献：

修改添加const radioGroupField = wrapper.find(RadioGroupField).dive() expect(radioGroupField.children()).to.have.length(2)，因为可能需要渲染组件（非DOM节点）

更新

我尝试过使用名称而不是字符串作为组件并潜水   方法，但突然间我得到一个错误：

dive()

您的测试中使用的任何组件都需要导入。

以下是一个例子：

Foo.js：

ReferenceError: RadioGroupField is not defined

Foo.test.js

import React from 'react' export const Bar = (props) => { return ( <div> {props.children} </div> ) } export const Baz = () => ( <div>Foo</div> ) export const Foo = () => ( <Bar> <Baz /> <Baz /> </Bar> ) export default Foo

Answer 2

这也有效：

const radioOption = wrapper.find(RadioGroupField).dive().find(RadioOption);

测试反应组件的子女数量

2 个答案: