Enzyme 是 React 测试工具库，可以方便、快捷地对 React 组件进行测试。它提供了一系列的 API，包括渲染、查找、交互等，能够帮助我们快速编写测试用例。在 React Redux 应用中，我们常常需要模拟 API 调用，以便测试组件的渲染和数据流转。本文将介绍如何使用 Enzyme 模拟 API 调用，以及在测试中的应用。
安装 Enzyme
首先，我们需要安装 Enzyme。可以使用 npm 或 yarn 进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16
或
yarn add --dev enzyme enzyme-adapter-react-16
然后，在测试文件中引入 Enzyme，以及需要使用的 API：
import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() });
模拟 API 调用
Enzyme 提供了 mount 和 shallow 两种渲染方法，其中 mount 可以完全渲染组件的子树，包括子组件和 DOM 元素；shallow 只渲染当前组件，不渲染子组件和 DOM 元素。一般来说，shallow 更适合单元测试，而 mount 更适合集成测试。
在模拟 API 调用时，我们可以使用 mount 方法挂载组件，并在 componentDidMount 生命周期中模拟 API 调用。例如：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ----- ----------- ------- --------------- - ------------------ - ------------- ---------- - - ----- ---- -- - ------------------- - ------------------ -------------- -- ---------------- ---------- -- --------------- ---- ---- - -------- - ------ ----------------------------- - - ----------------------- -- -- - ----------- ---- ---- ----- -- -- - ----- --------- - ------------------ ---- ---------------------------------------- ------ --- --------------- -- ------------------------------ -- - -------------------------------------- ---- ------ --- --- ---展开代码
上述代码中，MyComponent 组件在 componentDidMount 生命周期中模拟了一个 API 调用，并将数据保存到组件的状态中。在测试中，我们通过 mount 方法挂载组件，然后使用 text 方法获取组件的文本内容。由于 API 调用是异步的，因此我们需要在断言之前等待一段时间，以确保数据已经加载完毕。
在测试中的应用
我们可以像上面的例子一样，在测试中模拟 API 调用，以便测试数据流转的正确性。例如，我们可以测试一个带有异步数据加载和用户交互的组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ----- ----------- ------- --------------- - ------------------ - ------------- ---------- - - ----- ----- -------- ------ ------ ---- -- ---------------- - ---------------------------- - ------------------- - ---------------- - ---------- - --------------- -------- ---- --- ------------------ -------------- -- ---------------- ---------- -- --------------- ----- -------- ----- --- ------------ -- --------------- ------ -------- ----- ---- - ------------- - ---------------- - -------- - ----- - ----- -------- ----- - - ----------- -- --------- - ------ ---------------------- - ---- -- ------- - ------ ----------- ---------------------- - ---- -- ------ - ------ - ----- ----------------- ------- ------------------------------------------ ------ -- - ---- - ------ ----- - - - ----------------------- -- -- - ----------- ------- ------ -- -- - ----- --------- - ------------------ ---- ----------------------------------------------- ------ --- --------------- -- ------------------------------ -- - -------------------------------------- ---- --- --------- --- --- ----------- ---- -- ------ ------- -- -- - ----- --------- - ------------------ ---- ------ --- --------------- -- ------------------------------ -- - ------------------------------------------- ----------------------------------------------- ------ --- --------------- -- ------------------------------ -- - -------------------------------------- ---- --- --------- --- --- --- ---展开代码
上述代码中，MyComponent 组件从 API 加载数据，并根据加载状态和加载结果渲染不同的 UI。在测试中，我们首先测试了组件的初始渲染，然后测试了点击按钮后重新加载数据的效果。由于 API 调用是异步的，我们需要在每个测试中按照上述方法等待一段时间。
总之，Enzyme 可以帮助我们编写完善的测试用例，包括模拟 API 调用。在开发过程中，良好的测试覆盖率可以保证组件的正确性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bb077f306f20b3a6a4e073
