Javascript 测试反应组件'；儿童人数

我第一次在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>

因此，当我为模态组件编写测试时，我想检查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);

  });

从“React”导入React；
从“chai”导入{expect}；
从“testHelpers/intl酶测试助手”导入{shallowWithIntl}；
从“/Modal”导入{Modal}；
常数周期={
fom:‘2018-01-01’，
汤姆：“2018-03-01”，
};
它（'应显示模态组件'，（）=>{
const wrapper=shallowWithIntl（）；
const radioGroupField=wrapper.find（'radioGroupField'）；
expect（radiogroup字段）.to.have.length（1）；
});

我怎样才能写那个测试

更新

我尝试过在组件和潜水方法中使用name而不是string，但突然出现了一个错误：

ReferenceError:未定义RadioGroup字段

这是我的测试：

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

it（'skal vise sykdom og skade periode'，（）=>{
const wrapper=shallowWithIntl（）；
const textraeafield=wrapper.find（'textraeafield'）；
const undertekst=wrapper.find（'undertekst'）；
const radioGroupField=wrapper.find（'radioGroupField'）；
const fieldArray=wrapper.find（'fieldArray'）；
const hovednapp=wrapper.find（'hovednapp'）；
const knapp=wrapper.find（'knapp'）；
常量radioGroupFieldComponent=wrapper.find（RadioGroupField.dive（）；
expect（radioGroupFieldComponent.children（））.to.have.length（2）；
expect（textAreaField）.to.have.length（1）；
期望（低于）有长度（1）；
expect（radiogroup字段）.to.have.length（1）；
expect（fieldArray）.to.have.length（1）；
期望（hovednapp）.to.have.length（1）；
期望（knapp）.to.have.length（1）；
});

要引用组件，请使用其名称，而不是文档中的字符串：

wrapper.find(Foo) // Foo component, not 'Foo'

我想检查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);

  });

使用

children（）

const radioGroupField = wrapper.find(RadioGroupField).dive()
expect(radioGroupField.children()).to.have.length(2)

参考资料：





编辑：
添加
dive（）
，因为渲染组件（非DOM节点）可能需要这样做

更新

我尝试过在组件和潜水中使用name而不是string
方法，但突然我得到一个错误：

ReferenceError:未定义RadioGroup字段

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

下面是一个例子：

Foo.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

从“React”导入React
导出常量条=（道具）=>{
返回(
{props.children}
)
}
导出常量Baz=（）=>(
福
)
导出常量Foo=（）=>(
)
导出默认Foo

Foo.test.js

import React from 'react'
import { shallow } from 'enzyme'
import Foo, { Bar, Baz } from './Foo'

it('Foos', () => {
  let wrapper = shallow(<Foo />)
  expect(wrapper.find(Bar)).toHaveLength(1) // jest syntax
})

从“React”导入React
从“酶”导入{shall}
从“/Foo”导入Foo，{Bar，Baz}
它（'Foos'，（）=>{
让包装器=浅（）
expect（wrapper.find（Bar））.toHaveLength（1）//jest语法
})
这也适用于：

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

检查示例中的
children（）
api，您需要查找组件而不是字符串包装器.find（RadioGroupField）和in expect，您需要用户expect（RadioGroupField.children（））.to.have.length（2）；基于编辑：您必须导入所有这些组件并删除字符串。出于某种原因，如果我这样编写测试，测试将失败：
AssertionError:expected{length:0}的长度为2，但得到了0
编辑的add dive（）答案并进行了本地验证。我还建议检查您是否正在使用最新的
酶
版本，如果它仍然存在。我现在已经尝试使用了dive，突然间我不断收到错误，我用新代码更新了我的问题。更新了答案。您必须导入组件。我现在已尝试使用dive，但出现了引用错误，我已使用新代码更新了我的问题。RadioGroupField和RadioOption都是react组件，如模型组件。它由您创建或从某些节点模块导入。因此，您需要像导入模型组件一样导入这两个组件