React 单元测试 - Jest+Enzyme（持续更新）-FunTeaLearn Online Web Tutorials

介绍

在前端开发中，进行单元测试可以有效地提升代码的可靠性、可维护性，并降低代码出错的概率。React 是一套非常受欢迎的前端开发框架，而 Jest 和 Enzyme 是两个常用的 React 单元测试工具。在本文中，我们将会详细的介绍 Jest 和 Enzyme 这两个工具，并且通过实例代码进行演示。

Jest

什么是 Jest

Jest 是 Facebook 推出的一个开源的 JavaScript 单元测试框架。Jest 可以帮助我们对代码进行测试，并且提供了完整的测试环境和丰富的 API 接口，拥有简单易用、速度快、丰富的功能特性等优点。

安装 Jest

我们可以通过 npm 全局安装 jest：

npm install -g jest

也可以通过项目内安装：

npm install jest --save-dev

Jest 配置文件

我们可以通过 package.json 文件中的 jest 属性来配置 Jest：

// www.javascriptcn.com code example
{
    "jest": {
        "moduleFileExtensions": [
            "js",
            "jsx"
        ],
        "moduleDirectories": [
            "node_modules",
            "src"
        ],
        "moduleNameMapper": {
            "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
            "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        },
        "transform": {
            "^.+\\.(js|jsx)$": "babel-jest"
        },
        "setupFilesAfterEnv": [
            "<rootDir>/src/setupTests.js"
        ]
    }
}

这里我们对一些常用的配置进行了说明：

moduleFileExtensions：测试文件支持的文件扩展名。
moduleDirectories：测试文件搜索的目录，这里我们指定了 node_modules 和 src 目录。
moduleNameMapper：用于指明一些需要 mock 的文件。
transform：将测试文件转化成 Jest 可以识别的格式。
setupFilesAfterEnv：在每个测试文件运行之前，执行的文件。

Jest 测试脚本

下面是一个简单的 Jest 测试脚本：

// www.javascriptcn.com code example
describe('加法测试', () => {
  test('1 + 1 = 2', () => {
    expect(1 + 1).toBe(2);
  });

  test('2 + 2 = 4', () => {
    expect(2 + 2).toBe(4);
  });
});

我们可以使用 describe 函数来定义一组测试，使用 test 函数来定义一个测试用例。在这个例子中，我们测试了两个加法的算式是否正确。

Jest 常用断言

Jest 提供了各种各样的断言方法，这里我们列出了一些常用的断言方法：

toBe(expected)：判断实际值是否等于期望值。
toEqual(expected)：判断实际值与期望值是否相等。
toBeNull()：判断实际值是否为 null。
toBeUndefined()：判断实际值是否为 undefined。
toBeDefined()：判断实际值是否已定义。
toBeTruthy()：判断实际值是否为 true。
toBeFalsy()：判断实际值是否为 false。
toContain(expected)：判断实际值中是否包含期望值。
toMatch(regexp)：判断实际值是否匹配正则表达式。
toThrow(error)：判断实际值是否抛出指定的错误。

Enzyme

什么是 Enzyme

Enzyme 是由 Airbnb 提供的一个 React 组件测试工具。它提供了一套简单的 API 来操作 React 组件，并且支持多种渲染方式以及完善的断言机制，可以让我们方便地对 React 组件进行测试。

安装 Enzyme

我们可以通过 npm 安装 Enzyme：

npm install enzyme --save-dev

需要注意的是，在使用 Enzyme 之前，还需要安装相应的 Adapter：

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

Enzyme 配置

我们需要在测试文件中引入 Enzyme，并对其进行一些基本的配置：

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

这里我们引入了三个渲染组件的函数：shallow、mount 和 render。需要注意的是，在使用之前也需要引入 React 库。

Enzyme 测试脚本

下面是一个使用 Enzyme 测试 React 组件的例子：

describe('组件测试', () => {
  it('应显示 "Hello, world!"', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('div').text()).toBe('Hello, world!');
  });
});

这里我们对一个名为 MyComponent 的 React 组件进行了测试。我们使用 shallow 函数来渲染 MyComponent 组件，并在期望的结果中查找到了 “Hello, world！” 文字。

Enzyme 常用方法

Enzyme 提供了各种各样的方法来测试 React 组件，这里我们列出一些常用的方法：

shallow(node[, options])：渲染组件，并返回浅层包装器。
mount(node[, options])：渲染组件，并返回完整包装器，返回结果为一个 React 组件。
render(node[, options])：渲染组件，并返回纯 HTML，返回结果为字符串。
exists(selector)：判断包装器中是否存在指定的 DOM 节点或者组件。
find(selector)：根据选择器查找包装器中的节点。
prop(key)：返回 props 中指定 key 的值。
state([stateKey])：返回组件状态。
simulate(event[, eventData])：模拟指定的事件，常用于测试用户交互行为。

示例代码

下面是一个使用 Jest 和 Enzyme 进行测试的示例代码：

// www.javascriptcn.com code example
// Header.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Header from './Header';

describe('Header 组件测试', () => {
  it('应该渲染 Header 组件', () => {
    const wrapper = shallow(<Header />);
    expect(wrapper.find('.header').exists()).toBe(true);
  });

  it('应该显示网站名称', () => {
    const wrapper = shallow(<Header />);
    expect(wrapper.find('.header__title').text()).toBe('React Blog');
  });

  it('应该显示导航菜单', () => {
    const wrapper = shallow(<Header />);
    expect(wrapper.find('.header__nav').exists()).toBe(true);
  });

  it('应该包含三个导航项', () => {
    const wrapper = shallow(<Header />);
    expect(wrapper.find('.header__nav-item').length).toBe(3);
  });
});

// www.javascriptcn.com code example
// Header.js
import React from 'react';
import './Header.css';

function Header() {
  return (
    <header className="header">
      <h1 className="header__title">React Blog</h1>
      <nav className="header__nav">
        <ul>
          <li className="header__nav-item">首页</li>
          <li className="header__nav-item">分类</li>
          <li className="header__nav-item">关于</li>
        </ul>
      </nav>
    </header>
  );
}

export default Header;

// www.javascriptcn.com code example
/* Header.css */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem;
  background-color: #eee;
}

.header__title {
  margin: 0;
}

.header__nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.header__nav-item {
  margin-right: 1rem;
}

在这个例子中，我们测试了一个 Header 组件，用于显示一个博客网站的标题和导航菜单。我们使用了 Jest 和 Enzyme 两个工具，分别对组件的渲染、文字内容以及导航菜单等进行了测试。

结语

Jest 和 Enzyme 是两个非常好用的 React 单元测试工具，能够帮助我们有效地提升代码质量。希望本文对大家学习 Jest 和 Enzyme 有所帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67806596ce7f48612539b129

React 单元测试 - Jest+Enzyme（持续更新）

介绍