Question

我们正在使用Semantic React UI library。代码通常如下：

<div className="EditTemplateMetaDataPage">
        <Page title={...}>
          <Container text>
            <Segment>
              <Grid columns={1}>
                <Grid.Column>
                  <Button ...>

对于许多人来说，这可能很有趣，使用类似的反应组件库，如Material UI或Bootstrap React。

我们目前将mount与enzyme库而不是shallow一起使用，因为我们只渲染一个级别，对于测试中的第一个<Grid>组件，这只是一个视觉助手，而我们确实需要更深层Button。

由于性能和避免重叠测试，建议使用shallow。（我们遵循London school TDD，并仅检查存在的子组件及其接口是否正确使用）

我们想出了仅使用CSS作为可视组件，即

<div className='ui one column grid'>

而不是：

<Grid columns={1}>

但我们不确定，这是否是最佳方法。你有其他想法吗？在这种情况下我们如何使用shallow(...)？

Answer 1

浅实际上允许您将组件用作选择器，因此您可以执行类似

的操作

import Button from '../Button'

const page = shallow(<Page />)

expect(page.find(Button).length).toBe(1)

http://airbnb.io/enzyme/docs/api/selector.html

如何使用Enzyme浅和基于组件的UI进行测试？

1 个答案: