在前端开发中，对组件进行测试是十分必要的。React 作为当前最流行的前端开发框架之一，其组件测试工具 Enzyme 也越来越受到开发者的关注。但是，如果测试的组件不规范、不清晰，就会增加测试的难度，同时也会影响开发效率和代码质量。
因此，本篇文章将从如何优化被 Enzyme 测试的组件入手，详细介绍如何提高测试质量和开发效率。
1. 测试代码与产品代码分离
和产品代码类似，测试代码同样需要优雅的组织和管理。我们可以将测试代码与产品代码分离，即在不同的文件夹中分别存放，以方便管理。例如，我们可以将产品代码存放在 src 文件夹下，将测试代码存放在 tests 文件夹下。
在测试文件夹中，可以按照产品代码中的组件层次结构，建立测试文件夹结构。例如，有如下组件层次结构：
则测试文件夹结构可以如下所示：
-- -------------------- ---- ------- ---- ----------- ------------- -------- ---------- -------------- ------ ----------- ------------------ -------- --------------- -------------------展开代码
在上面的示例中，我们将测试文件命名为 *.test.js 的形式，以使之与产品代码文件区分开来。
此外，我们可以编写一个脚本，自动执行测试命令。这么做的好处在于，可以在运行测试之前进行代码检查、格式化等操作，并且也能自动检测代码变化，只自动运行有变化的测试用例，以提高整体开发效率。
2. 推荐使用 snapshot 进行组件渲染测试
在 React 开发中，组件渲染测试是最常见的测试之一。渲染测试可以确保渲染出的组件符合预期，同时也可以检验组件的 props 和 state 是否正确。而对于这样的渲染测试，我们推荐使用 Jest 强大的快照测试功能。
快照测试是将组件渲染的结果系列化为一个字符串，然后将这个串和之前的一个保存的快照串进行比较，以此来确认组件是否按照预期被渲染。这种方法非常适用于 React 应用中的组件，因为 React 组件的输出结果就是 DOM。
我们可以通过如下命令安装依赖：
npm i --save-dev enzyme-to-json jest-enzyme
安装完成后，我们可以在测试文件中，将组件渲染为 JSON，然后使用 toMatchSnapShot() 进行快照测试。
下面是一个示例代码，展示了如何使用 Jest 进行快照测试：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - ----- - ---- -------- ------ - ---------------- - ---- ---------------- ------ ----------- ---- --------------- ----------------------------------------------- ----- ------ --- ---------------------- ---- -- -- - ----------- ----------- -- -- - ----- ------- - ------------------ --- --------------------------------- -- --展开代码
3. 使用高质量的测试生成器生成测试数据
在测试过程中，测试数据的生成通常需要占用大量的时间和人力。为了提高测试数据的质量和效率，我们有必要使用高质量的测试数据生成器。
一个优秀的测试数据生成器能够自动化生成符合要求的数据，减少测试过程中手工输入数据和抽象的工作。目前最流行的测试数据生成器是 faker.js，它是一个优秀的 Javascript 库，可以用来生成各种随机数据。
我们可以使用 faker.js 来生成各种类型的测试数据，例如数字、字符串、日期等等。在使用时，我们可以自定义生成数据的格式，以适应测试需求。
以下是一个使用 faker.js 的示例：
-- -------------------- ---- ------- ------ ----- ---- ------- ----- -------------- - -- -- -- ---------- ----------------------- --------- ---------------------- ------ ----------------------- -- -----------------------------展开代码
在示例中，我们已为 generatePerson() 编写了一个函数，该函数将返回一个对象，对象中包含了随机生成的人物信息，如姓氏、名字、邮箱等等。
4. 使用 sinon.js 测试函数
在 React 组件开发中，我们通常会调用一些函数来协助组件进行工作。为此，我们需要编写一些单元测试来确保这些函数能够正常运行。
除了上述讲述的 Jest 和 Enzyme 之外，我们还推荐使用开源的被动模拟库，如 sinon.js，来模拟我们的函数。模拟音库可以让我们模拟任何函数，包括外部依赖项。
通过 sinon.js，我们可以针对函数的不同方面进行测试，如函数是否被正确调用，它是否具有正确的参数，它是否执行了预期的行为等等。
以下是一个使用 sinon.js 模拟函数的示例：
-- -------------------- ---- ------- ------ ----- ---- ------- ----- ---------- - ---------- -- - ------ ----------- - ----- -------- - ------------- -- -- -------------------- ---------------------------- -- ----- ---- ----------------------------------- -- ----- ----展开代码
在上述示例中，我们已经使用 sinon.js 完全模拟了 myFunction 函数。sinon.spy() 方法用于创建一个 SpY 对象，这是推荐优先使用的用于测试代码的 sinon 方法。通过 sinon.spy() 方法，我们获得了 callback 函数的一个被监听的版本。测试 myFunction() 因为使用了我们间谍的callback，可以非常直接地测试 myFunction()，从而验证了功能是否按照预期工作。
结论
通过本篇文章，我们可以清楚地了解到在 React 组件测试过程中，有关于测试组件的代码结构优化、snapshot 的使用、测试数据生成、函数模拟等方面的建议，这对于我们进行测试工作有极大的帮助。通过对每个建议的实际应用，我们可以提高测试质量和开发效率，在工作中更好地推进前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676d490182fcee791c667ba0
