0


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

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

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

4

2 回答 2

1

如果您查看layer 组件的源代码，您会看到它返回了您在 render 方法中发布的 span。直到组件挂载后，层的内容才会通过调用类addLayer中的方法来呈现Layer。

我相信您应该使用酶的mount功能来测试图层是否正确呈现其内容，因为您希望componentDidMount调用该方法。

于 2017-06-20T16:30:34.240 回答
0

我终于设法通过模拟垫圈层组件来解决这个问题：

jest.mock("grommet/components/Layer", () => (props) => props.children);
于 2020-09-09T14:02:30.870 回答