React 是一个流行的 JavaScript 框架，适用于构建单页应用程序，大型 Web 应用程序能够更高效、更可靠地运行。 Enzyme 是一个用于 React 组件单元测试的 JavaScript 库。它提供了一组实用工具，以生成有意义的测试结果。
Enzyme 简介
Enzyme 是由 Airbnb 开发的一款 React 组件测试工具。它允许开发者在编写测试时以 React 的组件为中心，提供一个类似于 jQuery 的 API，使组件的测试变得更加容易。
Enzyme 有助于简化测试流程。它提供了一种声明式的方式来测试组件，在一个常规的 JavaScript 环境中亦能独立运行。
如何使用 Enzyme
安装 Enzyme
在终端中输入以下命令：
npm install --save-dev enzyme
引入 Enzyme
import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() });测试组件
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ --------- ---- --------------- -------------------- ---- -- -- - ------------ ------ ----------- -- -- - ----- ------- - ------------------ ---- ---------------------------------- --- ---
在这个测试用例中，我们使用 shallow 方法来浅渲染一个 <Component /> 组件。我们能够对这个将要测试的组件进行快速友好的测试。
Enzyme 的核心方法
Enzyme 提供了三个核心方法： shallow、 mount 和 render。我们可以根据需要使用其中的任意一个。以下是三个方法的详细介绍。
shallow
shallow 方法可用于快速渲染一个组件，仅仅渲染当前组件，不渲染它的子组件。
const wrapper = shallow(<Component />);
mount
mount 方法可以为当前组件及其所有子组件提供一个完整的 DOM 结构。
const wrapper = mount(<Component />);
render
render 方法能够渲染一个组件为静态 HTML，并返回一个 Cheerio 实例。
const wrapper = render(<Component />);
Enzyme 的选择器和断言
Enzyme 支持与 jQuery 相似的选择器和断言，使用合适的断言和选择器，我们可以用少量的代码编写出具有影响力的测试。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --------- ---- ---------------
-------------------- ---- -- -- -
------------ ------ --- ----------- -- -- -
----- ------- - ------------------ ----
---------------------------------------------------
---
------------ ---- ------- ------- -- -- -
----- ------- - ------------------ --------- ----
-------------------------------------------
---
---在此测试用例中，我们验证组件是否渲染出来，并且验证调用 props() 方法是否创建了正确的属性。
Enzyme 的高级用法
除了用于浅渲染和渲染子组件，Enzyme 还提供了一些高级用法，如遍历和交互。
遍历
使用 find 方法和 contains 方法来定位渲染树中的元素。
const wrapper = shallow(<Component />);
wrapper.find('.button').simulate('click');
expect(wrapper.state('isOpen')).toEqual(true);交互
通过 simulate 方法来模拟用户交互，以测试组件如何响应用户操作。
const wrapper = shallow(<Component />);
wrapper.find('.button').simulate('click');
expect(wrapper.state('isOpen')).toEqual(true);Enzyme 的优缺点
优点
- 简化了测试流程，并且方便进行单元测试。
- 支持生成有意义的测试结果，属性、状态以及挂钩。
- API 友好，与 jQuery API 类似，方便开发者更快地上手。
缺点
- 尽管 API 友好，但还是需要花费一些时间学习。
- 有点慢，与其他测试库比较，Enzyme 的性能并不理想。
- 对于 React 16.9 之前的版本，存在很多限制。
总结
Enzyme 是一个功能强大的 React 组件单元测试工具，能够简化测试流程，并提供了一组实用的 API，尤其是它与 jQuery API 类似，方便开发者更快地上手。
然而，它的性能与某些库相比并不够理想，需要花费时间进行学习，其对 React 16.9 之前的版本存在一些限制。
无论如何，Enzyme 是 React 应用程序开发过程中的必备工具，它可以帮助开发者编写更有效的测试代码，从而使前端开发更可靠并更快速。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b59d6968c7c53b0db1d1c