Jest+Enzyme 2018 最全的 React 单元测试方案
在前端开发中，单元测试是非常重要的一环。它可以保证代码的可靠性，减少 bug 的出现，提高代码质量。在 React 项目中，Jest+Enzyme 是目前最流行的单元测试方案之一。本文将介绍 Jest+Enzyme 的使用方法，包括环境搭建、基本使用、常见问题及解决方案。
一、环境搭建
- 安装 Jest 和 Enzyme
Jest 和 Enzyme 是两个独立的库，需要分别安装。可以使用 npm 进行安装：
--- ------- ---------- ---- ------ -----------------------
其中，enzyme-adapter-react-16 是针对 React 16 版本的 Enzyme 适配器，需要根据 React 的版本进行选择。
- 配置 Jest
在项目根目录下，创建一个 jest.config.js 文件，配置 Jest 的一些参数：
-------------- - -
---------------- --------
--------------------- ------ -------
---------- -
------------------ -------------
--
----------------- -
----------- -------------------
--
---------- ---------------------------------------
------------------- ----------------------------------
--其中，testEnvironment 指定测试环境为 JSDOM，moduleFileExtensions 指定测试文件的后缀名，transform 指定使用 babel-jest 进行代码转换，moduleNameMapper 指定 @ 别名为 src 目录，testMatch 指定测试文件的匹配规则，setupFilesAfterEnv 指定测试前的初始化文件。
- 配置 Enzyme
在项目根目录下，创建一个 tests/setupTests.js 文件，配置 Enzyme 的适配器：
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
二、基本使用
- 测试组件渲染
首先，我们来测试一个简单的组件是否能够正确渲染。假设我们有一个组件叫做 HelloWorld，代码如下：
------ ----- ---- -------- ----- ---------- - -- -- - ------ ----------- ------------- -- ------ ------- -----------
我们可以编写一个测试文件 tests/HelloWorld.test.js，测试该组件是否能够正确渲染：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---------- ---- --------------------------
---------------------- -- -- -
----------- ----------- -- -- -
----- ------- - ------------------- ----
----------------------------------
---
---其中，shallow 函数用于浅渲染组件，返回一个 Enzyme 的 wrapper 对象。toMatchSnapshot 函数用于比较渲染结果与预期结果是否一致。
- 测试组件状态
接下来，我们来测试一个带有状态的组件。假设我们有一个组件叫做 Counter，代码如下：
------ ------ - -------- - ---- --------
----- ------- - -- -- -
----- ------- --------- - ------------
----- ----------- - -- -- -
-------------- - ---
--
------ -
-----
--------- -----------
------- ----------------------------------
------
--
--
------ ------- --------我们可以编写一个测试文件 tests/Counter.test.js，测试该组件是否能够正确更新状态：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- -----------------------
------------------- -- -- -
----------- ----------- -- -- -
----- ------- - ---------------- ----
----------------------------------
---
----------- ----- ----------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
------------------------------------------------ ----
---
---其中，find 函数用于查找组件内的元素，simulate 函数用于模拟事件触发。
三、常见问题及解决方案
- 测试异步代码
有时候我们需要测试异步代码，比如使用 axios 发送请求。这时候我们可以使用 Jest 的异步测试方法，如下所示：
------ ----- ---- -------- ----------- ---- ----------- ----- -- -- - ----- ---- - ----- ------------------------------------------ ------------------------------- ---
其中，async/await 关键字用于异步测试，toMatchSnapshot 函数用于比较异步结果与预期结果是否一致。
- 测试 Redux
如果项目中使用了 Redux，我们可以使用 redux-mock-store 库来测试 Redux 相关代码。比如，我们可以测试一个 action 是否能够正确地被 dispatch：
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ - --------- - ---- ------------
----- ----------- - --------
----- --------- - --------------------------------
--------------------- -- -- -
-------------- --- ------- -------- -- -- -
----- ----- - --------------
----------------------------
----- ------- - -------------------
----------------------------------
---
---其中，configureMockStore 函数用于创建一个 mock store，increment 函数是一个 Redux action，getActions 函数用于获取 mock store 中的所有 action。
- 测试 React Router
如果项目中使用了 React Router，我们可以使用 react-router-dom 库中的 MemoryRouter 组件来测试路由相关代码。比如，我们可以测试一个组件是否能够正确地渲染在指定路径下：
------ ----- ---- --------
------ - ----- - ---- ---------
------ - ------------ - ---- -------------------
------ --- ---- --------
--------------- -- -- -
----------- ----------- -- -- -
----- ------- - ------
------------- -----------------------
---- --
---------------
--
----------------------------------
---
---其中，MemoryRouter 组件用于模拟路由，initialEntries 属性用于指定初始路径。
四、总结
Jest+Enzyme 是目前最流行的 React 单元测试方案之一，它可以帮助我们保证代码的可靠性，减少 bug 的出现，提高代码质量。在使用 Jest+Enzyme 进行测试时，需要注意环境搭建、基本使用及常见问题及解决方案。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663daa25d3423812e4bbbb63