Enzyme 的 API 文档及使用技巧
Enzyme 是一个用于 React 组件测试的 JavaScript 库，其 API 的简洁和易于使用使其受到前端开发人员的喜爱。Enzyme 的 API 包含了一组用于测试 React 组件的工具，包括组件渲染、交互和状态管理等功能。本文将深入介绍 Enzyme 的 API 文档和使用技巧，并提供一些示例代码来帮助你更好地掌握 Enzyme。
安装 Enzyme
首先，我们需要使用 npm 或 yarn 安装 Enzyme。假设我们使用 npm 来安装 Enzyme，我们可以通过以下命令使用 npm 将 Enzyme 添加到项目中：
npm install --save-dev enzyme
安装完 Enzyme 之后，我们需要将其导入到测试文件中。
import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() });
其中，EnzymeAdapter 是官方推荐的 React 适配器，它帮助 Enzyme 与 React 一起使用。
浅渲染（Shallow rendering）
浅渲染（shallow rendering）是 Enzyme 最常用的一个功能，它只渲染一个组件而不渲染其子组件。这使得测试更加容易并且更快速。我们可以使用 shallow() 方法实现浅渲染。
下面是一个简单的示例，使用 shallow() 方法实现浅渲染。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- -------- --------------- - ------ ------- ----------- -- ---------------------- ------------- - ----------- - -------- -- -- - ----- ------- - ----------------- ----------- -- --- ---- ---------------------------------------------- ---展开代码
在上面的示例中，我们定义了一个名为 MyButton 的函数式组件。 我们使用 Enzyme 的 shallow() 方法对 MyButton 组件进行浅渲染。然后，我们使用了 expect() 和 find() 方法来测试组件的输出是否符合预期。
深渲染（Full rendering）
深渲染（Full rendering）是 Enzyme 的另一个重要的功能，它通过将组件渲染为 DOM 树来测试组件交互和生命周期方法。与浅渲染不同，深渲染会渲染整个组件树，因此效率较低。可以使用 mount() 方法实现深层渲染。
下面是一个使用 mount() 方法实现深渲染的示例。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ----- ------ ------- --------------- - ------------------ - ------------- ---------- - - ------ -- -- - ------------------- - --------------- ------ ------------------ --- - ------------------- - ----------------------- -- ----------- - -------- - ------ - ----- ---------------------------------------- ------ ----------- ------------------------ --------------------------------------- -- ------- ----------------------------- ------- -- - - ----------- --- ------ -- -- - ----- ------- - ------------- ---- -------------------------------------- - ------------------- ---------------------------------------- -------------------------------------------------------- ---展开代码
上述示例中，我们定义了一个名为 MyForm 的 class 组件，并实现了 handleChange() 和 handleSubmit() 方法。 我们使用 Enzyme 的 mount() 方法渲染 MyForm 组件，随后我们模拟了一些交互并测试组件的状态是否符合预期。由于深层渲染需要模拟 DOM 环境，因此在测试的过程中通常会使用 jsdom 和 JSDOM 等库来模拟真实的浏览器环境。
模拟组件 （Mock components）
有时候，我们需要对一个需要依赖其他组件的组件进行测试。 通常情况下，我们需要为依赖的组件创建一个虚拟的测试组件来测试它。
下面是一个模拟组件的示例。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- -------- ------------- --------- ------- -- - ------ - ---- ------------------ ----------------------- ------ -- - ----------- - ----- ----------- -- -- - ----- ------- - ---------- ----- ------- - -------- ------------ ------------------ ------------- ------------ -------------- -- ----- ------------ - ---------------------------------- --------------------------------------------------- ---展开代码
在上面的示例中，我们使用 jest.fn() 方法来创建一个模拟的 onClick() 方法。 我们使用 shallow() 方法对 MyComponent 进行浅渲染，并创建了一个包含一个 <button> 元素的测试组件。 然后，我们使用 shallow() 方法创建了一个对 MyComponent 子元素进行浅渲染的虚拟组件，并测试其是否符合预期。
测试生命周期方法（Testing lifecycle methods）
React 组件的生命周期方法是组件的重要部分，Enzyme 还提供了用于测试生命周期方法的方法。
下面是一个测试 componentDidMount() 生命周期方法的示例。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ----- ----------- ------- --------------- - ------------------ - ------------- ---------- - - ------ -- -- - ------------------- - --------------- ------ ------ --- - -------- - ------ ------------------------------ - - --------- ------------------- --------- -------- -- -- - ----- --- - --------------------------------- --------------------- ----- ------- - ------------------ ---- ------------------------------- ---展开代码
在上面的示例中，我们定义了一个名为 MyComponent 的 class 组件，并实现了 componentDidMount() 方法。 我们使用 spyOn() 方法创建了一个 MyComponent.prototype.componentDidMount() 方法的模拟，然后通过 mount() 方法渲染 MyComponent 组件。最后，我们测试 MyComponent.prototype.componentDidMount() 方法是否被调用。此示例是测试 React 生命周期方法的基础，你可以使用此方法测试组件的其他生命周期方法（如 componentDidUpdate() 和 componentWillUnmount() 等）。
结束语
这篇文章介绍了 Enzyme 的 API 文档和使用技巧，并提供了一些示例代码来帮助你更好地掌握 Enzyme。 我们希望这篇文章能够带给你更多的灵感和启示，并帮助你更好地测试你的 React 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d80870a941bf7134e583b5
