Enzyme + chai + mocha：使用 React 组件测试-JavaScript中文网-JavaScript教程资源分享门户

Enzyme + chai + mocha：使用 React 组件测试

前言

在前端界，由于各种浏览器间的差异和复杂性，单元测试显得格外的重要。在 React 开发中，一个合适的单元测试方案将有助于我们确保组件在不同的状态下，表现一致并且不会出现意想不到的错误。本文将介绍如何利用 Enzyme + chai + mocha 这一组合，来进行 React 组件测试。

Enzyme 简介

Enzyme 是由 Airbnb 开发的用于 React 组件测试的 JavaScript 工具库。它提供了一套优雅的 API，用于操作 React 组件的输出结果，从而提供便捷的测试工作流程。

安装

Enzyme 的安装可以通过 NPM 来进行，输入以下命令即可：

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

Chai 简介

Chai 是一个 JavaScript 测试工具库，用于编写具有易读性和表达能力的测试用例。它提供了多种不同的断言风格，如 Should、Expect 和 Assert，可以根据自己的喜好进行选择。

Mocha 简介

Mocha 是一个 JavaScript 测试框架，它可以运行在浏览器端和服务端上，可用于单元测试、集成测试和功能测试。它提供了简单的 API，可以轻松地编写测试用例和组织测试套件。

编写测试用例

下面我们来编写一个测试用例，对一个简单的 React 组件 Navbar 进行测试。这个组件主要包含一个列表，当我们点击到列表项时，就会触发一个回调函数。

首先，我们需要在测试用例前导入以下模块：

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';

import Navbar from '../components/Navbar';

然后，我们可以编写一个 describe 块，来描述我们要进行测试的组件：

describe('<Navbar />', () => {

});

在这个 describe 块中，我们可以编写多个 it 块，针对不同的测试场景进行测试。下面是一个简单的例子，我们测试当点击列表项时，回调函数是否正确触发：

it('should call onNavItemClick when a navigation item is clicked', () => {
    const onNavItemClick = sinon.spy();
    const wrapper = shallow(<Navbar onNavItemClick={onNavItemClick} />);
    wrapper.find('.nav-item').first().simulate('click');
    expect(onNavItemClick).to.have.been.called;
});

在这个测试用例中，我们使用 sinon.js 来创建一个伪造的回调函数，然后利用 Enzyme 的 find() 和 simulate() 函数来模拟一个点击列表项的操作，最后我们使用 Chai 的 expect() 函数和 Enzyme 的 spy() 对象来验证回调函数是否被正确触发。

总结

Enzyme + chai + mocha 的组合，为 React 组件的测试提供了简单、灵活和强大的工具。使用 Mocha 进行测试套件的组织，使用 Enzyme 模拟组件输出的状态和操作，使用 Chai 对结果进行断言，这三大工具的组合能够大幅度提高 React 组件的测试效率，为我们的开发带来更加严谨和可靠的保障。

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