Enzyme 的基本使用教程与实例教学
Enzyme 是一款 React 组件测试工具，它可以模拟用户在真实环境下对组件的操作和事件触发，并根据预期结果进行断言。本文将为您介绍 Enzyme 的基本使用方法，包括安装、配置和常用 API，以及实例教学和示例代码。
一、安装和配置
Enzyme 是基于 JSDOM 和 Cheerio 的，所以在使用之前需要安装这两个工具。在项目根目录下执行以下命令：
npm install --save-dev enzyme jsdom cheerio
此外，为了使用 Enzyme，还需安装 React 和 Enzyme 的适配器：
npm install --save-dev react react-dom enzyme-adapter-react-16
在项目根目录下创建一个 setupTests.js 文件，用于配置 Enzyme 的默认适配器：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({adapter: new Adapter()});二、常用 API
- mount()：渲染组件并返回一个包含当前组件的实例的 ReactWrapper 对象，以便我们可以在其上执行 DOM 查询和操作。
import React from 'react';
import {mount} from 'enzyme';
it('renders correctly', () => {
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-class')).toHaveLength(1);
});- shallow()：与 mount() 类似，但只渲染当前组件的浅层副本，可以提高渲染效率。
import React from 'react';
import {shallow} from 'enzyme';
it('renders correctly', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.my-class')).toHaveLength(1);
});- render()：在节点上进行查找、断言和操作之前，可通过 render() 方法将 React 组件渲染为一组 JSON 的静态 HTML。
import React from 'react';
import {render} from 'enzyme';
it('renders correctly', () => {
const wrapper = render(<MyComponent />);
expect(wrapper.find('.my-class')).toHaveLength(1);
});- find()：在当前 ReactWrapper 对象中查找匹配选择器的子节点。
import React from 'react';
import {mount} from 'enzyme';
it('renders correctly', () => {
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-class')).toHaveLength(1);
});- contains()：查找当前 ReactWrapper 对象中是否包含了给定的 React 元素。
import React from 'react';
import {mount} from 'enzyme';
it('renders correctly', () => {
const wrapper = mount(<MyComponent />);
expect(wrapper.contains(<div className="my-class">Hello world!</div>)).toBeTruthy();
});- simulate()：在当前 ReactWrapper 对象上模拟用户事件，触发组件的相应事件处理函数。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------- ---- --------- ----------- ----- ----------- -- -- - ----- ----------- - ---------- ----- ------- - ------------- --------------------------- ------------- -------------------------- --------------------------------------------- ---
三、实例教学
以下是一个简单的 Counter 组件，用于展示 Enzyme 的基本使用方法：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
----- ------- - -- -- -
----- ------- --------- - ------------
----- --------- - -- -- -------------- - ---
----- --------- - -- -- -------------- - ---
------ -
-----
----------------
--------------
------- ------------------------------
------- ------------------------------
------
--
--
------ ------- --------我们可以编写以下测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------
------ ------- ---- -------------
------------------ ---- -- -- -
----- ------- - ---------------- ----
----------- ------- ---------- -- -- -
--------------------------------------
---
-------------- ----- ---- --- - ------ -- --------- -- -- -
---------------------------------------------- -- ---- -
-----------------------------------------------
----------------------------------------------
---
-------------- ----- ---- --- - ------ -- --------- -- -- -
---------------------------------------------- -- -- --- -
-----------------------------------------------
----------------------------------------------
---
---四、总结
Enzyme 是一个非常有用的 React 组件测试工具，它可以帮助我们实现自动化测试，提高代码的质量和可靠性。在使用 Enzyme 时，我们需要先安装和配置工具的依赖，并学习常用的 API，包括 mount()、shallow()、render()、find()、contains() 和 simulate() 等。最后，我们可以通过一个简单的示例了解 Enzyme 的基本使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65433d507d4982a6ebce351e