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

【问题标题】：How to test with Enzyme shallow and component based UIs?如何使用 Enzyme 浅层和基于组件的 UI 进行测试？
【发布时间】：2018-04-28 04:53:35
【问题描述】：

我们使用的是Semantic React UI library。代码通常如下所示：

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

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

我们目前使用mount 和enzyme 库而不是shallow，因为我们只会渲染一层深度 , 到测试中的第一个 <Grid> 组件，它只是一个视觉帮助，而我们确实需要更深埋的 Button。

为了性能和避免重叠测试，建议使用shallow。（我们关注London school TDD，只检查子组件是否存在以及它们的接口是否正确使用）

我们想出将 CSS-only 用于可视化组件，即

<div className='ui one column grid'>

代替：

<Grid columns={1}>

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

【问题讨论】：

将组件与语义-ui-react 包装器分开并自行测试，有帮助吗？例如，如果您有一个应该存在于语义 UI 网格中的类似卡片的结构，那么分解成一个单独的卡片组件并自行测试它？
一直在考虑类似的解决方案@DimitrisKaragiannis！这也是使用 React 组件时的一般最佳实践。问题是，假设您只想断言 WrapperComponent 包含这些 CardComponents 的列表，例如另一个名为CardComponentList 的包装器。只要他们在Grid 中，这是不可能的。只要将Grid、Segment 等用于基本的布局结构，这些东西就变得非常困难。我想我会为此使用原生 DOM 元素。这也是功能设计和纯设计之间更清晰的关注点分离。

标签： javascript reactjs tdd enzyme semantic-ui-react

【解决方案1】：

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

import Button from '../Button'

const page = shallow(<Page />)

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

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

【讨论】：

使用shallow时找不到Button，因为shallow只渲染一层深度。（这实际上是浅的目的）在这个级别上只有一个<Grid/>，但没有Button。那是因为Grid 本身就是一个组件。（见上面我的嵌套示例）
@headphones 试试page.find(Grid).dive().find(Button)
很棒的发现@SeanWu！这基本上会奏效。问题是，在深度嵌套的结构中，需要链接dive()-calls，因为dive-也是浅层渲染。（这很好，否则我们将使用mount）。但我认为使用本机 DOM 元素时整体体验仍然更好，如上所述。当使用dive 时，我暗示该组件必须具有特定的嵌套结构。这不是被测对象，所以我不想在我的测试中包含这些东西。不过，谢谢你的提示！
@headphones 没错。使用dive，你只测试你想要的，而不是任何不需要的孩子