在 React 中使用 Jest 和 Enzyme-JavaScript中文网-JavaScript教程资源分享门户

React 是一个广泛使用的前端框架，被许多企业和开发者所采用。为了保证 React 代码的质量，我们需要使用单元测试来测试我们构建的组件。Jest 和 Enzyme 是测试 React 组件的两个最常用的工具。在本篇文章中，我们将深入介绍如何在 React 中使用 Jest 和 Enzyme 进行单元测试，并通过示例代码展示如何运用。

Jest

Jest 是一个流行的 JavaScript 测试框架，用于在项目中编写简单而有效的单元测试。它支持各种测试场景，包括快照测试、异步测试和测试覆盖率等，Jest 的高度自动化使得我们能够在很短的时间内编写出许多的测试用例。

Enzyme

Enzyme 是一个由 Airbnb 开发的 React 测试工具库，它可以帮助开发者在不依赖于浏览器的情况下测试 React 组件的输出和交互。Enzyme为 React 组件提供了多种测试方法，包括浅层渲染、全渲染和模拟用户操作等，这使得组件测试更加便捷。

安装 Jest 和 Enzyme

在开始使用 Jest 和 Enzyme 测试我们的 React 应用程序之前，我们需要先安装它们。我们可以通过以下命令使用 NPM 安装：

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

jest：安装 Jest 测试框架。
enzyme：安装 Enzyme 测试工具库。
enzyme-adapter-react-16：安装用于适配 React 16 版本的 Enzyme 适配器。

同时，我们还需要在项目的根目录中创建一个 setupTest.js 文件来引入 Enzyme 适配器和全局配置。在 setupTest.js 文件中，添加以下代码：

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

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

我们还需要在项目的 package.json 文件中添加以下测试用例脚本：

"test": "jest",
"test:coverage": "jest --coverage"

接下来，我们就可以在项目中愉快地使用 Jest 和 Enzyme 进行单元测试了。

测试 React 组件

让我们来看一下如何使用 Jest 和 Enzyme 测试 React 组件。以下是一个基本的 React 组件，该组件包含一个输入框和一个按钮，它接受一个 props updateText，当按钮被点击时，该 props 将会被调用：

// javascriptcn.com 代码示例
import React, { useState } from 'react';

function App({ updateText }) {
  const [text, setText] = useState('');

  const handleButtonClick = () => {
    updateText(text);
  };

  return (
    <div>
      <input value={text} onChange={(event) => setText(event.target.value)} />
      <button onClick={handleButtonClick}>Update</button>
    </div>
  );
}

export default App;

我们将测试用例放在一个名为 app.test.js 的单独文件中。在测试用例中，我们需要测试它接受 props，调用 props 中的函数并更新状态。以下是测试代码的例子：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

describe('App', () => {
  it('renders an input element', () => {
    const wrapper = shallow(<App />);
    expect(wrapper.find('input')).toHaveLength(1);
  });

  it('renders a button element', () => {
    const wrapper = shallow(<App />);
    expect(wrapper.find('button')).toHaveLength(1);
  });

  it('updates the text state when typing in the input', () => {
    const wrapper = shallow(<App />);
    wrapper.find('input').simulate('change', { target: { value: 'hello' } });
    expect(wrapper.state('text')).toEqual('hello');
  });

  it('calls updateText with the input text', () => {
    const updateText = jest.fn();
    const wrapper = shallow(<App updateText={updateText} />);
    wrapper.setState({ text: 'hello' });
    wrapper.find('button').simulate('click');
    expect(updateText).toHaveBeenCalledWith('hello');
  });
});

在上面的测试用例中，我们创建了四个测试用例，这些测试用例分别测试组件是否正确地渲染了输入框和按钮、输入框的value state 是否能够被更新，以及点击按钮是否能够调用 updateText 函数并更新状态。这些用例演示了使用 Jest 和 Enzyme 编写 React 单元测试的基本技巧。

测试覆盖率

在验证代码的正确性时，我们不仅应该关注代码是否能够实现特定的功能，还应该关心代码被测试的覆盖面。由于 Jest 与测试覆盖率非常搭配，你可以很方便地测量你的代码被多少行测试所覆盖。在安装 Jest 库时已经附带了 coverage 选项，我们可以使用 npm run test:coverage 命令在终端中运行它。测试结果中将包含有关每个文件的测试覆盖率信息。

总结

Jest 和 Enzyme 是 React 单元测试过程中最常用的两个工具，它们具有许多有用的测试方法。本篇文章中，我们详细介绍了如何在 React 中使用 Jest 和 Enzyme 进行单元测试，并通过示例代码演示了它们的使用。当我们开发 React 应用程序时，使用 Jest 和 Enzyme 来测试组件可以提高代码的质量，减少后续的调试时间和改进周期。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653d1b277d4982a6eb6fd284