Question

我正在使用grommet做出反应来呈现我的应用程序的UI。当用户单击按钮时，我显示了一个Layer组件。一切正常，但我不知道如何测试Layer的孩子。我使用酶，摩卡和柴作为测试套件。这是我的组件代码的代码：

<Layer align="right" closer>
    <Header size="large" justify="between" align="center">
        <Button icon={<CloseIcon />} plain={true} onClick={ props.hide }/>
    </Header>
    <Section key={index} pad={{ horizontal: 'large', vertical: 'small' }}>
        { props.list }
    </Section>   
</Layer>

这是我的测试：

const wrapper = shallow(<MyComponent />);
const layer = wrapper.find(Layer);

//this works
expect(layer).to.have.length.of(1);

const section = layer.find(Section);

//and this fails
expect(section).to.have.length.of(1);

查看应用程序中呈现的组件，我发现grommet以这种方式呈现他的Layer组件：

<Layer><span style={{ display: 'none'}}></span></Layer>

任何人都可以帮助我吗？谢谢

Answer 1

如果查看source code for the layer component，您将看到它返回您在render方法中发布的范围。直到该组件通过调用addLayer类中的Layer方法挂载了layer's contents will be rendered。

我相信您应该使用酶的mount函数来测试Layer是否正确呈现其内容，因为您需要调用componentDidMount方法。

Answer 2

我终于设法通过模拟索环层组件来解决此问题：

jest.mock("grommet/components/Layer", () => (props) => props.children);

测试索环层组件

2 个答案: