我应该在单元测试中验证组件安装后是否设置了道具？ （使用酶、摩卡、柴）

Question

我最近开始编程。我在一个使用 React 编程并使用 Enzyme、Mocha 和 Chai 进行单元测试的团队中。请参阅下面的软件包版本。

我的团队坚持每个组件的单元测试文件都应该有以下测试：

beforeEach(() => {
   component = mount(<MyComponent />)
})

it('renders with correct properties', () => {
   component.setProps({
     height: 100,
     width: 500,
     placeholder: 'Some value here'
   })
   expect(component.prop('height')).to.equal(100)
   expect(component.prop('width')).to.equal(500)
   expect(component.prop('placeholder')).to.equal('Some value here')
})

测试到此结束。对我来说，这个测试看起来只是测试 React 设置了 props。我觉得我们可以相信 React 正在做的事情，而是应该测试我们如何使用 React 来渲染我们的组件。我宁愿测试道具值对其他道具、状态的影响，以及组件如何作为道具的结果呈现。

但我是新手，我的团队认为我的担心有误，所以我想我会检查一下：上述测试用例中是否有我遗漏的价值？这是好的做法吗？

相关问题

• Best practice on setting props in unit tests（也是我的问题）

包

• “酶”：“^3.3.0”，
• "enzyme-adapter-react-16": "^1.1.1",
• “摩卡”：“^5.0.0”，
• “柴”：“3.5.0”

Answer 1

完全同意——测试 React 库本身的行为是没有意义的。在我的团队中，我们使用 Jest 的快照测试作为初始基本测试来检查渲染，然后在此基础上进行大量状态转换测试；这可能对您有所帮助，因为您似乎正在寻找一种“在我们检查其他任何内容之前呈现在基本预期输出中的完整性检查”类型的测试。所以我们会像你所说的那样做mount，然后我们的期望是：

expect(toJson(component)).toMatchSnapshot();

通过执行toJson，与不执行toJson相比，您至少可以以更易于阅读的形式读取快照的输出。

有pros 和cons 可以将快照测试结合到您的项目中——有些人说这太过分了，有些人觉得它很有用。就我个人而言，我觉得看看我将来添加的任何代码是否会破坏现有的渲染，使我的单元测试真正有用并减少对手动测试的依赖是很有用的。阅读this thread，其中详细介绍了快照测试。