更可靠的 React 组件：从“可测试的”到“测试通过的”

如何确保一个组件如期望的工作呢？

你可以说：“我都自己手动试过的呀。”

如果你打算对每个组件的每个改动都手动验证的话，或早或晚的，你就会跳过这项苦差事了，而小的瑕疵早晚也会出现。

这就是对组件的自动化验证，也就是单元测试（unit test），为何重要的原因。

单元测试保证了每次对代码的变动都将引起测试结果的变动，换言之，如果组件行为的改变导致测试失败，那么这种改变是错误的，就会立即得到发现。

为什么测试 React 组件？

我们一开始需要理解 React 中可测试性的本质：React 将 UI 表现（representation）和 UI 逻辑分开，这让测试过程变得相对容易。

1. 可测试的组件具有更稳定的行为

对组件进行测试能够提高我们的信心，确保组件在未来发生改变时仍能按预期工作。

2. 为重构或重用打下基础

使用单元测试也能为组件的重构和重用打下基础，确保组件在被修改或重复使用时仍能按照预期工作。

3. 组件可测试性也能帮助我们撰写更好的代码

通过测试组件，能促使我们编写质量更高的代码，以符合测试的要求。

怎样让 React 组件更易测试？

虽然 React 本身就具备可测试性，我们还是有一些方法可以编写更易于测试的组件。

1. 使用更纯净的函数式组件

函数式组件比类组件更容易测试，因为它们没有状态、不会产生副作用，在测试时可以更加轻松地隔离并测试单个组件。

2. 避免不必要的副作用

在组件内，要尽量避免不必要的副作用，例如直接修改 DOM，或者使用无法简单地模拟或存根（stub）的库。

3. 依赖注入

依赖注入是一种将组件的依赖项通过参数的方式传递给组件的编程设计模式，这使得组件更容易进行测试。

如何测试 React 组件？

要对 React 组件进行单元测试，可以使用以下步骤：

1. 选择合适的测试框架 ：React 有很多可用的测试框架，例如 Jest、Enzyme 和 React Testing Library。选择最适合你的项目和测试需求的框架。

2. 创建测试文件 ：创建一个新的测试文件，并导入要测试的组件以及测试框架。

3. 编写测试用例 ：使用测试框架提供的断言语法，编写测试用例来测试组件的行为。

4. 运行测试用例 ：使用测试框架提供的命令运行测试用例，以验证组件是否按预期工作。

结语

React 的可测试性使得测试组件变得更加容易，而对组件进行测试也有许多好处，例如提高代码的质量、稳定性和可维护性。

通过遵循本文介绍的方法，你就可以编写更易于测试的 React 组件，并利用单元测试来提高组件的质量和稳定性。