前言
为了保证 React 应用的稳定性和可维护性，我们需要编写测试代码对组件进行测试。而 Enzyme 是一款优秀的 React 测试工具，可以帮助我们轻松地测试组件的渲染结果、事件触发等。
在本文中，我们将学习如何使用 Enzyme 编写符合规范的测试代码。
Enzyme 简介
Enzyme 是 Airbnb 出品的 React 测试工具，它可以模拟组件的渲染结果，也可以模拟事件的触发。它提供了三种测试方式：
- shallow rendering：浅渲染，只渲染组件的一层子组件，可以快速地依赖组件，而不用考虑子组件的实现方式。
- mounting：完整渲染，渲染组件及其子组件，可以测试组件在 DOM 树中的表现。
- rendering：静态渲染，将组件渲染成静态 HTML，结合 Jest Snapshot Testing 可以帮助我们轻松判断组件是否变化。
前端测试之组件测试
组件测试是前后端测试中必不可少的一环，它可以保证组件的功能、渲染效果是否正确，进而保证整个应用的功能正确。
在组件测试中，我们需要测试以下几个方面：
- 组件的渲染结果是否正确。
- 组件监听事件是否正确。
- 组件的状态是否正确。
- 组件的生命周期是否正确。
下面我们通过一个简单的例子来介绍如何使用 Enzyme 测试一个组件。
示例代码
我们假设现在有一个最简单的 Counter 组件，它可以实现加一和减一的操作，组件的代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
----- - -
------ -
--
--------------- - -- -- -
--------------- ------ ---------------- - - ---
--
--------------- - -- -- -
--------------- ------ ---------------- - - ---
--
-------- -
------ -
-----
----- ---------------------------------- -------------------------
------- ---------------------------- -------------------------------
---------
---------
------- ---------------------------- -------------------------------
---------
---------
------
--
-
-
------ ------- --------这个组件很简单，它包含了一个状态 count 和两个按钮，分别可以实现加一和减一的操作。
接下来，我们通过 Enzyme 来测试这个组件。
使用 Enzyme 测试组件
首先，我们需要安装 Enzyme 和 react-test-renderer：
npm i enzyme react-test-renderer -D
然后，在测试文件中引入需要的模块：
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import Counter from './Counter';
Enzyme.configure({ adapter: new EnzymeAdapter() });这里我们使用了 shallow rendering 模式来测试组件，通过 import { shallow } from 'enzyme' 来引入。
接下来我们编写测试代码：
-- -------------------- ---- -------
----- ----- - ------ - --- ----- - ----- -- -
----- ------- - ---------------- ---------- ----
-- ------- -
------------------------
-
------ --------
--
----- ------------ - --------- ------ -- -
------ ---------------------------------------
--
------------- ------- ------- -- -- -
----- ------- - --------
----- ------------ - --------------------- -------------------
------------------------------------
---
------------- --------- -------- -- -- -
----- ------- - --------
----- ------------ - --------------------- --------------------
------------------------------------
---
------------- --------- -------- -- -- -
----- ------- - --------
----- ------------ - --------------------- --------------------
------------------------------------
---
------------- ------ -- --- -- -- -
----- ------- - --------
----- ------------ - -----------------------
-----------------------------
---
-------------- ------ ---------- ------- --------- -- -- -
----- ----- - --
----- ------- - ----------- - ----- ---
----- ------ - --------------------- --------------------
-------------------------
----- ------------ - --------------------- -------------------
------------------------------------------- - ---
---
-------------- ------ ---------- ------- --------- -- -- -
----- ----- - --
----- ------- - ----------- - ----- ---
----- ------ - --------------------- --------------------
-------------------------
----- ------------ - --------------------- -------------------
------------------------------------------- - ---
---这里我们编写了 6 个测试用例，分别测试了组件的渲染结果、状态、事件监听等。
我们可以通过 npm test 命令运行测试，查看测试结果是否正确。
总结
在实际的项目中，组件测试是必不可少的一环，而 Enzyme 这款测试工具可以帮助我们轻松地测试组件。本文介绍了如何使用 Enzyme 编写符合规范的测试代码，希望可以对大家在实际开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a8f7aaadd4f0e0ff23ddb5