我觉得大部分使用jest和enzyme进行组件测试的价值都不高，我错了吗？

Question

我对使用React-Jest-Enzyme进行测试很新，但是从我收集到的所有信息来看，大多数测试似乎实际上是测试React库是否出现问题，而不是我的实际业务逻辑。

我会给您一些例子，如果我错了，请纠正我：

快照测试:

这种策略有什么作用吗？

从我看到的情况来看，它的主要目的是捕捉到代码中任何不想要的更改。它“stringify”我的组件树，并且只注意到是否添加了任何换行符/字符，对吧？

所以它主要用于那些我可能会意外按下键盘的情况吗？或者是别人意外搞乱了我的代码？

Enzyme的mount/shallow和Jest的

我看到的大多数解释如何使用它们的示例都是这样的：

const wrapper = mount(<MyComponeny />)
expect(wrapper.find(‘button’).simulate(‘click)).toHaveBeenCalledTime(1)

我能从中得到什么价值？ 如果我使用Enzyme的simulate('click')来模拟点击按钮，那么我应该期望它会触发点击事件。

我到底在测试什么？是Enzyme的功能吗？

还有Enzyme提供的setState方法。 如果wrapper.setState({value: 'some value'})应该改变我的状态，为什么我会看到像这样的用例：

wrapper.setState({value: ‘new value’)}
expect(wrapper.state(‘value’)).toBe(‘new value’)

为什么我需要测试测试框架/额外的库？

这似乎有点模糊不清。

- ueeieiie

---

这正是我对于网上99%的测试教程的感受 - 它们什么都没测试。除了JavaScript按照预期工作（let value = 1; assert(value === 1)），处理器按照预期工作（无尽的计算器a+b测试），物理定律仍然适用（渲染div，断言div已被渲染）。我希望有更多解决实际问题的真实测试教程。 - andree

这不仅仅是一种印象，实际上大多数测试都是无用的。 - 6infinity8

Answer 1

快照测试：

它主要用于我意外按了键盘的情况吗？或者其他人意外地搞乱了我的代码？

如果您调整了一个常见的组件/服务/实用程序，但没有注意到它会影响一些意外的组件，例如。

现在它可能会以良好的方式影响它，例如修复组件中意外的文本-但是快照功能可以让您快速查看所有受影响的组件的更改。

const wrapper = mount(<MyComponeny />)
expect(wrapper.find(‘button’).simulate(‘click)).toHaveBeenCalledTime(1)

What value do I get out of it?

这只是一个简单的例子。它实际上并没有测试任何东西，因此它是一个非常糟糕的测试。通常您会测试更重要的内容，例如:

toHaveBeenCalledTime(1) 在某些进程上 - 例如，确保在整个点击和其他触发器流程中仅执行了一次网络请求。

why do I see use cases like this:

wrapper.setState({value: ‘new value’)}
expect(wrapper.state(‘value’)).toBe(‘new value’)

?

这是一个简单的例子，展示了您可以在React组件上设置状态。它实际上并没有测试任何内容。

您可以在组件上设置状态，并确保它呈现了正确数量的子元素或者呈现了您期望的其他内容。

这也与快照有关-

在组件上设置某个状态并创建一个快照，然后，在处理该组件使用的服务和工具时，您可以确保它不会对该特定状态进行破坏。

- Vitali Zaidman

Answer 2

我知道这已经很晚了，但是我认为Enzyme总体上提供的价值非常少。测试通常只在编写或修改代码之前适用，并且只有在编写时才提供价值。编写测试的整个目的是模拟使用并断言交互将如预期一样。这就是测试驱动开发（TDD）的全部内容。

当涉及到Enzyme时，TDD是不可能的。这是因为您正在断言实现细节。至于它的快照工具，您基本上已经说明了它的无用性。它只是试图告诉您“哇，有东西改变了”，而您可以在PR中很清楚地从git diff中看到。希望这能帮助任何阅读此文的人。

- alaboudi