在进行前端测试时，Enzyme 绝对是一个我们不能忽视的工具。但是在使用 Enzyme 的过程中，我们可能会遇到一些误解和陷阱，导致测试代码的不稳定或者出错。本文将会讨论 Enzyme API 文档中一些常见误解以及陷阱，并且提供有深度和学习以及指导意义的解决方案和代码示例。
浅渲染和深渲染的概念
Enzyme 中最常用的两个方法是 shallow() 和 mount()，这两个方法用于对组件进行渲染。
其中，shallow() 方法是浅渲染方法，它只会渲染当前组件，而不会渲染子组件。相比较而言，mount() 方法是深渲染方法，它会渲染当前组件以及子组件。通常来说，我们会在测试一个组件时，使用 shallow() 方法来进行测试，以避免一些无关的影响。
但是需要注意的是，如果我们在使用 shallow() 渲染方法时，某个测试用例中的子组件的某个状态改变了，但是由于浅渲染的原因，我们无法感知到这个状态变化。那么在这个情况下，我们应该使用深渲染，来确保所有组件的状态都会被正确更新。
下面的示例展示了浅渲染和深渲染的区别：
-- -------------------- ---- -------
-- --------------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
------ ------ --------
--------- -------- -- --------
--
-
-------------------- - -- -- -
---------------
--------- ------ ---------
---
--
-------- -
------ -
-----
---------------------------
------------------------------
------- ------------------------------------------ -----------------
------
--
-
-
------ ------- -------------- -------------------- ---- -------
-- -------------------
------ ----- ---- --------
------ - -------- ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ --- ------- ------ -- -- -
----- ------- - -------------------- ----
------------------------------------------------ ---------
-------------------------------------------------- -- ----------
---
-- --------------
---------- ------ -------- -- --- ----- -- -- -
----- ------- - -------------------- ----
-----------------------------------------
------------------------------------------------ ----------- -- ----
---
-- --------------
---------- ------ -------- -- --- ----- -- -- -
----- ------- - ------------------ ----
-----------------------------------------
------------------------------------------------ ----------- -- ----
---
---类组件和函数组件的区别
在 React 中，我们有两种形式的组件：类组件和函数组件。类组件是一个 ES6 类，而函数组件是一个 JavaScript 函数。
在 Enzyme 中，对于类组件和函数组件，我们的测试方法是不一样的。对于类组件，我们使用 shallow() 或者 mount() 渲染方法即可；但是对于函数组件，由于它没有 this 关键字，Enzyme 无法使用 shallow() 和 mount() 的方式进行渲染。这个时候，我们需要使用 enzyme-to-json 模块来将函数组件转换成我们需要的格式。
下面的示例展示了如何测试一个函数组件：
// MyFunctionalComponent.js
import React from "react";
const MyFunctionalComponent = ({ text }) => {
return <h1>{text}</h1>;
};
export default MyFunctionalComponent;-- -------------------- ---- -------
-- -----------------------------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------ ---- -----------------
------ --------------------- ---- --------------------------
------------------ -------- --- --------- ---
--------------------------------- -- -- -
---------- ------ --- ------- ------ -- -- -
----- ------- - ------------------------------ ----------- ------- ----
------------------------------------------
---
---组件调用时机的误解
在有些情况下，我们可能会渲染一个被包裹在高阶组件中的组件，而高阶组件的作用是在组件调用时机上做一些掌控。但是这种情况在进行测试时会有一些问题。
我们需要清楚的是，我们测试的是被渲染出来的组件，而不是组件的包装器。所以，如果我们使用 shallow() 渲染方法，只会渲染高阶组件，而不会渲染包裹在高阶组件内部的组件。那么为了解决这个问题，我们可以选择直接使用 mount() 方法进行深渲染，让组件和高阶组件都被渲染出来。
下面的示例展示了如何测试被包裹在高阶组件中的组件：
// MyWrappedComponent.js
import React from "react";
const MyWrappedComponent = ({ text }) => {
return <h1>{text}</h1>;
};
export default MyWrappedComponent;-- -------------------- ---- -------
-- --------------
------ ------ - --------- - ---- --------
----- ----------- - ---------------- -- -
------ ----- ------- --------- -
-------- -
------ -
-----
----------------
----------------- --------------- --
------
--
-
--
--
------ ------- -------------- -------------------- ---- -------
-- --------------------------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------ ------------------ ---- -----------------------
------------------ -------- --- --------- ---
------------------------------ -- -- -
---------- ------ --- ------- ------ -- -- -
----- ---------------- - --------------------------------
----- ------- - ----------------------- ----------- ------- ----
------------------------------------------------ ---------
---
---总结
在使用 Enzyme 进行前端测试的过程中，我们需要注意浅渲染和深渲染的区别，以及类组件和函数组件的测试方法不同，还有高阶组件包裹的组件的测试时机问题。只有深刻理解这些问题的本质和解决方案，我们才能够使用 Enzyme 为我们带来高质量的前端代码。
参考链接
- Enzyme API documentation
- Testing React function components with enzyme-to-json and Jest
- Testing Higher Order Components in React with Enzyme
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c4a7ca83d39b488181f062