React 测试框架 Enzyme 的高级应用教程-JavaScript中文网-JavaScript教程资源分享门户

在现代前端开发中，React 已经成为最受欢迎的 JavaScript 库之一。它完美地解决了许多我们在过去遇到的问题。但是，即使使用 React，我们仍然需要对代码进行测试以确保它的正确性。Enzyme 是一个 React 测试工具库，它提供了一组 API，用于测试 React 组件的行为和状态。这篇文章将会探讨 Enzyme 的高级应用并提供一些示例代码。

Enzyme 概述

在深入了解 Enzyme 的高级应用之前，让我们先了解一下它的基础知识。Enzyme 是由 Airbnb 开发的一个 React 测试工具库，它允许你编写可读性强、易于维护的断言。它提供了一组 API，可以测试组件的渲染结果、交互以及状态。

Enzyme 支持以下三种测试技术：

浅层渲染测
虚拟 DOM 渲染
真实 DOM 渲染

Enzyme 安装

Enzyme 可以使用 npm 安装。你可以在你的 React 项目中使用以下命令：

$ npm install --save-dev enzyme enzyme-adapter-react-16

其中，enzyme 是 Enzyme 的核心包，enzyme-adapter-react-16 是让 Enzyme 适配 React 16.0 及以上版本的适配器。

接着，我们需要在测试文件中引入它们，代码如下：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

Enzyme API 介绍

在深入了解 Enzyme 的高级应用之前，让我们先详细介绍一下它的 API。

浅层渲染 Shallow

浅层渲染是 Enzyme 中最基本的测试技术之一。它允许你测试一个组件的渲染结果，但是不会渲染该组件的子组件。你可以使用 shallow 函数来实现浅层渲染，代码如下：

import { shallow } from 'enzyme';

const wrapper = shallow(<Component />);

完整渲染 Mount

完整渲染是 Enzyme 中的另一种测试技术。它会创建真实的 DOM 树，并在其中渲染组件及其子组件。你可以使用 mount 函数来实现完整渲染，代码如下：

import { mount } from 'enzyme';

const wrapper = mount(<Component />);

渲染为静态 HTML Render

渲染为静态 HTML 同样也是 Enzyme 中支持的一种测试技术。你可以使用 render 函数将一个 React 组件渲染为静态 HTML 字符串，代码如下：

import { render } from 'enzyme';

const wrapper = render(<Component />);

组件查找

Enzyme 提供了一些 API 用于查找组件及其子组件，以便于对它们进行测试。

find(selector)

这个函数可以查找所有匹配选择器的组件，并将它们包装在一个实例中，以便于后续操作。

const wrapper = shallow(<Component />);
const button = wrapper.find('button');

children()

这个函数可以查找组件的直接子组件，并将它们包装在一个实例中，以便于后续操作。

const wrapper = shallow(<Component />);
const children = wrapper.children();

closest(selector)

这个函数可以查找组件的祖先组件中第一个匹配选择器的组件，并将它包装在一个实例中，以便于后续操作。

const wrapper = shallow(<Component />);
const closest = wrapper.closest('div');

属性访问

在测试组件时，你可以使用 props 函数来断言是否传递了正确的属性，code如下：

const wrapper = shallow(<Component />);
expect(wrapper.props().data).toEqual('Hello World');

事件模拟

在测试交互时，你可以使用 simulate 函数来模拟事件的触发，code如下：

const wrapper = shallow(<Component />);
wrapper.find('button').simulate('click');

状态检查

在测试组件时，你可以使用 state 函数来检查组件的状态，code如下：

const wrapper = shallow(<Component />);
wrapper.setState({ isOpen: true });
expect(wrapper.state().isOpen).toEqual(true);

Enzyme 高级应用

现在，让我们开始探讨 Enzyme 的高级应用。

快照测试

快照测试是一个广泛使用的测试技术，它允许你检查一个组件的更新是否导致了与期望不符的更改。Enzyme 为我们提供了一个toMatchSnapshot函数来实现快照测试，code如下：

import React from 'react';
import renderer from 'react-test-renderer';
import Component from './component';

test('Component component', () => {
  const component = renderer.create(<Component />);
  expect(component.toJSON()).toMatchSnapshot();
});

连接到 Redux

Enzyme 允许你将 Redux 与测试相结合。首先，你需要使用 Provider 组件为测试提供 Redux store，代码如下：

-- -------------------- ---- -------
------ - -------- - ---- --------------
------ ----- ---- ----------

---
----- --------- - --------
  --------- --------------
    ---------- --
  -----------
--
---

然后，你可以使用 redux-mock-store 来处理异步操作和在组件中触发的操作，代码如下：

-- -------------------- ---- -------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ - --------- - ---- ------------

---

----- ----------- - --------
----- --------- - --------------------------------

--------------- -------- -- -- -
  ----- ----- - ------------
  ------ ----------------------------------- -- -
    ----- ------- - -------------------
    -------------------------
      - ----- -------------------- --
      - ----- --------------------- -------- - ----- -- - -
    ---
  ---
---

使用 sinon.js

sinon.js 是一个用于 JavaScript 测试的独立库。它可以用来模拟 AJAX 请求、Spies、Stubs 以及 Mocks 等功能。Enzyme 可以与 sinon.js 相集成，以模拟组件中的行为和事件，代码如下：

import sinon from 'sinon';

...
const modalToggle = sinon.stub();
const component = shallow(<Component modalToggle={modalToggle} />);
component.find('button').simulate('click');
expect(modalToggle.calledOnce).toBe(true);
...

使用 Chai.js

Chai.js 是一个 JavaScript 测试库，它可以与 Enzyme 相结合，以对测试进行更精确的断言。代码如下：

-- -------------------- ---- -------
------ ----- - ------ - ---- -------
------ ---------- ---- --------------
------ - ----- - ---- ---------
------ --------- ---- --------------

-----------------------

---
----- ------- - ---------------- ----
----------------------------------------
---

结论

本文深入介绍了 Enzyme 的高级应用，并提供了一些示例代码。Enzyme 是一个十分强大的测试工具，它可以有效地测试 React 组件的行为和状态。在你的 React 项目中使用 Enzyme 进行测试，有助于你保持代码的正确性和可靠性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67508760050cf9039c1378c8