gpt4 book ai didi

javascript - 测试 React 组件的子组件数量

转载 作者:行者123 更新时间:2023-12-03 02:06:42 24 4
gpt4 key购买 nike

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

这是我的测试:

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

最佳答案

为了引用组件,请使用它们的名称而不是文档中的字符串:

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

I would like to check if there is a correct number of children components of the RadioGroupField component:

按照 enzyme API 中的说明使用 children()

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

引用文献:

编辑:添加 dive() 因为渲染组件(非 DOM 节点)可能需要它

Update

I have tried with using name and not string for the component and dive method, but all of a sudden I get an error:

ReferenceError: RadioGroupField is not defined

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

这是一个例子:

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

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

关于javascript - 测试 React 组件的子组件数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49775057/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com