React 组件测试是前端开发中非常重要的一部分,它能够确保代码质量和功能稳定性。其中一个重要的测试工具就是 Enzyme,在 React 社区中被广泛应用。Enzyme 提供了一系列 API,能够方便地操作 React 组件,断言它们的行为和状态。
本篇文章将分享 Enzyme 的使用经验和技巧,帮助读者掌握测试 React 组件的能力。
Enzyme 基础概念
Enzyme 是 Airbnb 团队开发的一款用于测试 React 组件的工具。它提供了三个工具类:Shallow
, Mount
, 和 Render
,每个类的职责如下:
Shallow
:用于单元测试,浅渲染组件,只渲染第一层子组件,并不涉及子组件内的交互;Mount
:用于组件集成测试,完全渲染组件及其所有子组件,可以测试交互、事件处理等功能;Render
:与Mount
类似,但是渲染成静态 HTML,并返回一个类似于 jQuery 对象的CheerioWrapper
对象。
总之,我们使用 Shallow
进行细节测试,使用 Mount
进行集成测试。
安装 Enzyme
使用 Enzyme 很简单,可以通过以下命令来安装:
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
其中,enzyme
是 Enzyme 的核心库,enzyme-adapter-react-16
是 React 16 适配器,react-test-renderer
是 React 提供的一个测试库,与 Enzyme 配合使用可以渲染并查询 React 组件树。需要注意的是,只有安装了适配器才能使用 Enzyme。目前,Enzyme 支持 React 16 及以上版本。
Enzyme API
shallow
shallow
方法用于浅渲染组件,它只渲染组件的第一层子组件,而不渲染子组件中的交互。使用 shallow
方法可以快速测试组件的渲染和 props,例如:
-- -------------------- ---- ------- ------ ------- --------- ---- --------- ------ ------- ---- -------------------------- ------ ----- ---- ---------- -------------------------- --- ------------ ----------------- -- -- - ----------- ------ -- -- - ----- ------- - -------------- -------------- ---- -------------------------------------- ----------- --- ---
在上面的例子中,我们测试了一个简单的组件 Hello
,并断言它渲染出的文本是否正确。这个例子中,我们使用了 shallow
方法来浅渲染 Hello 组件。我们使用 expect(wrapper.text()).toEqual('Hello, Charlie!');
断言 hello 组件渲染出的文本是否与预期值相同。
mount
mount
方法会完全地渲染组件,并且能够访问和操作其所有子组件。如果要测试组件的交互和事件处理,需要使用 mount
方法。
比如,我们有一个表单组件 Form
,它包含一个输入框和一个提交按钮。我们想测试该组件是否能够对用户的输入做出正确的响应。
-- -------------------- ---- ------- ------ ------- ------- ---- --------- ------ ------- ---- -------------------------- ------ ---- ---- --------- -------------------------- --- ------------ ---------------- -- -- - ---------- ------ --- ----- ---- ---- ----- ---- --- ----- ------- -- -- - ----- ------- - ----------- ---- ----- ----- - ---------------------- ------------------------ - ------- - ------ ------- ------- - --- ---------------------------------------------- --------- --- ---------- ---- -------- ---- --- ------ ------ -- --------- -- -- - ----- ------------ - ---------- ----- ------- - ----------- ----------------------- ---- ----- ------ - ----------------------- ------------------------- ----------------------------------------------- --- ---
在上面的例子中,我们测试了表单组件的交互和事件处理。在第一个测试中,我们找到了输入框并模拟输入“Hello, world!”,然后我们断言了该组件的状态是否更新正确。在第二个测试中,我们测试了提交按钮的点击事件,并断言 onSubmit 方法是否被正确调用。这个例子可以帮助我们理解 mount
方法如何使用。需要注意的是,完全渲染组件会比较耗时,因此,我们应该根据需要使用 shallow
或 mount
方法。
render
render
方法将组件渲染成静态 HTML,并返回一个类似于 jQuery 对象的 CheerioWrapper
对象。这个方法主要用于测试组件的渲染输出和 props。
-- -------------------- ---- ------- ------ ------- -------- ---- --------- ------ ------- ---- -------------------------- ------ ----- ---- ---------- -------------------------- --- ------------ ----------------- -- -- - ----------- ------ -- -- - ----- ------- - ------------- -------------- ---- -------------------------------------------------------- ----------- --- ---
在上面的例子中,我们测试了一个简单的组件 Hello
渲染时产生的文本内容是否符合预期结果。这个例子中,我们使用了 render
方法将 Hello
组件渲染成了静态 HTML,然后使用 find
方法找到 .greeting
对应的元素,查找它的文本内容是否符合预期结果。
Enzyme 经验分享
Enzyme 的初始化
Enzyme 的初始化需要根据 React 对应的版本适配,适配器需要在初始化时候注册。可以在 src/setupTests.js
中进行初始化,确保在所有测试开始前执行。
import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() });
断言 API
Jest 提供了丰富的断言 API,可以具体到组件,方法,属性等的测试。常用的断言方法包括 toBe
、toEqual
、toBeTruthy
、toContain
、toMatch
等。
expect(wrapper).toHaveLength(1); expect(wrapper.find('.input').prop('value')).toBe('123'); expect(wrapper.find('button').prop('disabled')).toBeTruthy(); expect(wrapper.text()).toContain('Hello, world!'); expect(wrapper.find('Input').props().type).toMatch(/number/);
取值 API
在 Enzyme 中,我们通常使用 find
、first
、last
、at
和 get
方法来访问元素、查询属性和值。
wrapper.find('.input'); wrapper.first('.input'); wrapper.last('.input'); wrapper.at(1); wrapper.get(0);
模拟事件
Enzyme 提供了模拟事件的 API,例如 simulate
方法。
wrapper.find('input').simulate('change', { target: { value: '123' } }); wrapper.find('button').simulate('click');
异步 API
Enzyme 支持异步函数,常用方法包括 async/await
和 Promise 等。在异步处理中,我们需要使用 act
方法来强制执行 React 组件状态的更新。
await act(async () => { await axios.get.mockImplementationOnce(() => Promise.resolve({ data: { greeting: 'Hello' } })); }); wrapper.update(); expect(wrapper.find('.greeting').text()).toEqual('Hello');
结语
Enzyme 是一个强大的测试工具,它能够测试 React 组件的状态和行为。本文介绍了 Enzyme 的基础概念,以及常用的 API。希望本文能够帮助读者掌握 Enzyme 的使用能力,并在 React 组件测试中发挥作用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6787216e4083a4caee069692