在开发 React 应用时，测试是很重要的一环。Jest 和 Enzyme 是 React 应用测试中常用的工具。Jest 是 Facebook 开源的 JavaScript 测试框架，Enzyme 则是 Airbnb 开源的 React 组件测试工具。本文将介绍如何使用 Jest 和 Enzyme 测试 React 应用。
安装 Jest 和 Enzyme
在开始之前，需要先安装 Jest 和 Enzyme。可以通过 npm 安装：
npm install --save-dev jest enzyme
测试组件
撰写测试用例
在测试 React 组件时，我们需要撰写测试用例来验证组件的行为是否符合预期。下面以一个简单的计数器组件为例。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
--------- - -- -- -
--------------- ------ ---------------- - - ---
--
--------- - -- -- -
--------------- ------ ---------------- - - ---
--
-------- -
------ -
-----
-------------------------
------- -----------------------------------
------- -----------------------------------
------
--
-
-
------ ------- --------针对该计数器组件，我们可以撰写如下测试用例:
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ------ ---- ------- ----- ----- ------ -- -- -
----- ------- - ---------------- ----
----------------------------------------------
---
---------- --------- ----- ----- ---- ----- --------- -------- -- -- -
----- ------- - ---------------- ----
----- --------------- - -----------------------------
----------------------------------
----------------------------------------------
---
---------- --------- ----- ----- ---- ----- --------- -------- -- -- -
----- ------- - ---------------- ----
----- --------------- - -----------------------------
----------------------------------
-----------------------------------------------
---
---运行测试
在 package.json 中增加以下命令：
"scripts": {
"test": "jest"
}在命令行中输入 npm test 运行测试。输出结果应该类似于：
PASS ./Counter.test.jsx
Counter component
✓ should render with initial count value zero (5 ms)
✓ should increment count value when click increment button (1 ms)
✓ should decrement count value when click decrement button (1 ms)
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total测试 Redux
如果应用使用了 Redux，那么可以使用 Jest 和 Enzyme 测试 Redux 相关的逻辑。下面以一个简单的 Redux 应用为例。
撰写测试用例
我们先来看一下要测试的应用。该应用中有一个计数器组件，提供了增加计数器、减少计数器的功能。另外，还有一个显示计数器数值的组件。
-- -------------------- ---- -------
-- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ ------- ---- ------------
------ ------------ ---- -----------------
------ - ---------- --------- - ---- ------------
----- --- - -- ------ ------------ ----------- -- -- -
-----
-------- ----------------------- ----------------------- --
------------- ------------- --
------
--
----- --------------- - -- ----- -- -- -- ----- ---
----- ------------------ - -
------------ ----------
------------ ----------
--
------ ------- ------------------------ --------------------------- -------------------- ---- -------
-- -----------
------ ----- ---- --------
----- ------- - -- ---------- --------- -- -- -
-----
------- ------------------------------
------- ------------------------------
------
--
------ ------- --------// CounterValue.jsx
import React from 'react';
const CounterValue = ({ count }) => <p>{count}</p>;
export default CounterValue;// actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });-- -------------------- ---- -------
-- -----------
------ ----- --------- - - ------ - --
------ ----- ------- - ------ - ---------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--我们可以撰写如下测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------------- ---- -------------------
------ ----- ---- --------------
------ --- ---- --------
------ ------------ ---- -----------------
------ - ---------- --------- - ---- ------------
------ - ---------- ------- - ---- -------------
----- --------- - ------------------------
------------- ----------- -- -- -
---------- ------ ---- ------- ----- ----- ------ -- -- -
----- ----- - ---------------------
----- ------- - ------------ ------------- -----------
------------------------------------------------------------
---
---------- -------- --------- ------ ---- ----- --------- -------- -- -- -
----- ----- - ---------------------
----- ------- - ------------ ------------- -----------
--------------------------------------------
--------------------------------------------------
---
---------- -------- --------- ------ ---- ----- --------- -------- -- -- -
----- ----- - ---------------------
----- ------- - ------------ ------------- -----------
--------------------------------------------
--------------------------------------------------
---
---
----------------- -- -- -
------------------- -- -- -
---------- ------ -- ------ -- --------- --- ------- -- -- -
----- -------------- - - ----- ----------- --
--------------------------------------------
---
---------- ------ -- ------ -- --------- --- ------- -- -- -
----- -------------- - - ----- ----------- --
--------------------------------------------
---
---
------------------- -- -- -
---------- ------ --- ------- ------- -- -- -
------------------------- ------------------------
---
---------- ------ ----------- -- -- -
-------
--------- ------ - -- -
----- ------------
---
----------- ------ - ---
---
---------- ------ ----------- -- -- -
-------
--------- ------ - -- -
----- ------------
---
----------- ------ -- ---
---
---
---运行测试
在 package.json 中增加以下命令：
"scripts": {
"test": "jest"
}在命令行中输入 npm test 运行测试。输出结果应该类似于：
-- -------------------- ---- -------
---- --------------
--- ---------
- ------ ------ ---- ------- ----- ----- ---- -- ---
- ------ -------- --------- ------ ---- ----- --------- ------ -- ---
- ------ -------- --------- ------ ---- ----- --------- ------ -- ---
---- -------------------
-----
-------
- ------ ------ -- ------ -- --------- --- ----- -- ---
- ------ ------ -- ------ -- --------- --- -----
-------
- ------ ------ --- ------- ----- -- ---
- ------ ------ --------- -- ---
- ------ ------ ---------
---- ------- - ------- - -----
------ - ------- - -----结论
本文介绍了如何使用 Jest 和 Enzyme 测试 React 应用。通过测试，可以有效地减少代码错误和增加代码可维护性。希望本文对于学习使用 Jest 和 Enzyme 测试 React 应用的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671496cdad1e889fe21488ba