在前端开发中，测试是非常重要的一环。而 Enzyme 是一个流行的用于 React 组件测试的工具，它可以帮助实现对组件渲染结果的断言、模拟用户操作等功能，使得测试更加方便和高效。但是，当需要测试多个相似的组件时，代码重复的问题会很明显，导致测试代码变得冗长和难以维护。本文介绍了一些可以避免代码重复的方法，以提高测试代码的可读性和可维护性。
提取共用方法
一个简单的方法是将一些共用的代码提取出来，以函数的形式封装起来。例如，我们有两个相似的组件 ComponentA 和 ComponentB，它们都需要进行相同的测试操作，比如mount，获取特定的 DOM 元素等。我们可以将这些共用的操作封装到一个函数里面，然后在每个组件的测试代码中调用这个函数即可。如下面的示例代码：
-- -------------------- ---- -------
------ - ----- - ---- ---------
-------- ------------------------ -
----- ------- - -----------------
----- ------- - ----------------------------
--------------------------------
-- ------
-
---------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ----------- ---
-------------------------
---
---
---------------------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ----------- ---
-------------------------
---
---上面的代码中，我们把 mount 和 find 两个操作封装到 testComponent 函数中，这样每个组件只需要调用一次即可，减少了代码重复。同时，如果以后需要修改测试逻辑，只需要在 testComponent 函数中修改即可，不需要修改每个组件的测试代码。
使用 Higher-Order Component
上面提取共用方法的方式是一个简单的方法，但是也有一些限制。例如，如果组件的结构比较复杂，每个组件需要调用的测试函数可能不同，这种方式就可能不适合。另一种方式是使用 Higher-Order Component(HOC)，我们可以创建一个高阶组件，将相同的测试逻辑作为这个组件的属性传递给被测试组件。如下面的示例：
-- -------------------- ---- -------
------ - ----- - ---- ---------
-------- --------------------------------- ---------- -
------ ----- ------- --------------- -
-------- -
----- ------- - ----------------------- --------------- ----
----- ------- - ----------------------------
--------------------------------
-- ------
------ ----------------- --------------- ---
-
-
-
---------------------- -- -- -
----- -------------- - --------------------------- - ---------- ------ ---
---------- ------ ----------- -- -- -
----- --------- - --------------- ---
-----------------
---
---
---------------------- -- -- -
----- -------------- - --------------------------- - ---------- ------ ---
---------- ------ ----------- -- -- -
----- --------- - --------------- ---
-----------------
---
---上面的代码中，我们创建了一个 withTestWrapper HOC，这个 HOC 接收两个参数：被测试组件和测试属性。在 HOC 中，我们将被测试组件通过 mount 函数渲染出来，然后进行相应的测试操作。最后将被测试组件和测试属性通过 props 传递给 HOC，看起来像一个新的包装组件。在测试代码中，我们可以直接使用 TestComponentA 或 TestComponentB 进行测试。这样，每个组件只需要定义一次 HOC，就可以使用相同的测试逻辑，避免了代码重复。
总结
在测试中避免代码重复可以提高测试代码的可读性和可维护性。本文介绍了两种方法：提取共用方法和使用 Higher-Order Component。这两种方法都可以根据实际情况选择，以提高测试代码的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646caa20968c7c53b0b9b575