如何测试使儿童成为酶中道具的组件

Question

我正在尝试测试给定的组件是否呈现与接收的组件一样多的子代。目前，它仅呈现两个组件。我被卡住了，因为我是单元测试的新手。这是我尝试过的：

Component.js：

const Component = ({ children }) => {
    return <div>{children}</div>;
};

Component.test.js：

import React from 'react';
import { shallow } from 'enzyme';
import Component from './Component';
import ChildComponent from './ChildComponent';
import ChildComponent2 from './ChildComponent';

it('show a ChildComponent component', () => {
    const wrapped = shallow(<Component children />);

    expect(wrapped.find(ChildComponent).length).toEqual(1)
});

it('show a ChildComponent2 component', () => {
    const wrapped = shallow(<Component children />);

    expect(wrapped.find(ChildComponent2).length).toEqual(1)
});

Answer 1

1. 当使用浅层渲染shallow时，将不会渲染子级，因此该测试无法正常工作。您打算检查孩子。
2. [渲染<Component/>时，您想实际传递那些孩子

<Component>
    <ChildComponent />
    <ChildComponent2 />
</Component>