如何使用Jest测试你的React组件

落日映苍穹つ 2023-10-13 19:03 109阅读 0赞

> **在本文中，我们将了解如何使用[Jest][]（Facebook 维护的一个测试框架）来测试我们的[React][]组件。我们将首先了解如何在纯 JavaScript 函数上使用 Jest，然后再了解它提供的一些开箱即用的功能，这些功能专门用于使测试 React 应用程序变得更容易。**

值得注意的是，Jest 并不是专门针对 React：您可以使用它来测试任何 JavaScript 应用程序。然而，它提供的一些功能对于测试用户界面来说非常方便，这就是为什么它非常适合 React。

![小丑杂耍 React 图标][React 1]

### 应用测试示例 ###

在我们测试任何东西之前，我们需要一个应用程序来测试！[您可以在 GitHub 上][GitHub]找到它以及我们即将编写的所有测试。如果您想使用该应用程序来感受一下，您还可以[在线找到现场演示][Link 1]。

该应用程序使用 ES2015 编写的，使用带有 Babel ES2015 和 React 预设的 webpack 进行编译。我不会详细介绍构建设置，但如果您想查看的话，一切都[在 GitHub 存储库中。][GitHub]您可以在自述文件中找到有关如何在本地运行应用程序的完整说明。如果您想了解更多信息，该应用程序是使用[webpack][]构建的，我推荐“ [Webpack 初学者指南][Webpack]”进行学习。

应用程序的入口是`app/index.js`：

render(
      <Todos />,
      document.getElementById('app')
    );

该`Todos`组件是应用程序的主要内容。它包含所有状态（该应用程序的硬编码数据，实际上可能来自 API 或类似数据），并有渲染两个子组件。

因为`Todos`组件包含所有状态，所以每当有任何变化时，它需要`Todo`和`AddTodo`组件通知它。因此，它将函数向下传递到这些组件中，当某些数据发生变化时它们可以调用这些函数，并`Todos`可以相应地更新状态。

最后，现在您会注意到所有业务逻辑都包含在`app/state-functions.js`：

export function toggleDone(todos, id) {…}
    
    export function addTodo(todos, todo) {…}
    
    export function deleteTodo(todos, id) {…}

如果您熟悉 Redux，它们与 Redux 所谓的`reducer`非常相似。事实上，如果这个应用程序变得更大，会考虑迁移到 Redux 以获得更明确、结构化的数据方法。

### 选择 TDD 而不是 TDD？ ###

关于**测试驱动开发**的优缺点已经有很多文章写过了，开发人员需要先编写测试，然后再编写修复测试的代码。这背后的想法是，通过先编写测试，您必须思考您正在编写的API，并且它可能会导致更好的设计。我认为这在很大程度上取决于个人偏好和测试的类型。我发现，对于React组件，我喜欢先编写组件，然后为最重要的功能添加测试。然而，如果您发现先为组件编写测试符合您的工作流程，那么您应该这样做。在这里没有硬性规定，做适合您和您的团队感觉最好的事情。

### 什么是Jest ###

[Jest][Jest 1]首次发布于2014年，尽管它最初引起了很多关注，但该项目一度停滞不前，并没有得到很积极的开发。然而，Facebook投入了大量精力来改进Jest，并发布了一些令人印象深刻的变化，值得重新考虑。与最初的开源发布相比，Jest仅保留了名称和标志。其他一切都已经改变和重写。如果您想了解更多信息，可以阅读Christoph Pojer的评论，他在其中讨论了该项目的当前状态。

如果您对使用其他框架设置Babel、React和JSX测试感到沮丧，那么我强烈建议您尝试Jest。如果您发现现有的测试安装速度很慢，我也强烈推荐Jest。它可以自动并行运行测试，其watch模式能够运行与更改文件相关的测试，这在您拥有大量测试套件时是非常宝贵的。它已经配置了JSDom，这意味着您可以编写浏览器测试但通过Node运行它们。它可以处理异步测试，并且具有内置的高级功能，如mocking、spy和stub。

### 安装和配置 Jest ###

首先，我们需要安装 Jest。因为我们也在使用 Babel，所以我们将安装另外几个模块，使 Jest 和 Babel 可以正常使用：

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react

您还需要一个`babel.config.js`包含 Babel 配置的文件，以使用您需要的任何预设和插件。如下所示：

module.exports = {
      presets: [
        '@babel/preset-env',
        '@babel/preset-react',
      ],
    };

本文不会深入探讨 Babel 的设置。如果您想具体了解有关 Babel 的更多信息，看我以前的文章。[ ][Link 2]

我们还不会安装任何 React 测试工具，因为我们不会从测试组件开始，而是从测试状态函数开始。

Jest 期望在一个文件夹中找到我们的测试`__tests__`，这已成为 JavaScript 社区中的一种流行惯例，我们将在这里坚持这一惯例。如果您不喜欢该`__tests__`设置，开箱即用的 Jest 还支持查找任何`.test.js`文件`.spec.js`。

由于我们将测试我们的状态函数，因此请继续创建`__tests__/state-functions.test.js`。 下面是一个测试用例，进行测试检查Jest配置是否正常。

describe('Addition', () => {
      it('knows that 2 and 2 make 4', () => {
        expect(2 + 2).toBe(4);
      });
    });

现在，进入您的`package.json`， 添加`npm test`命令：

"scripts": {
      "test": "jest"
    }

如果您现在执行`npm test`命令，您应该会看到测试运行并通过！

PASS  __tests__/state-functions.test.js
      Addition
        ✓ knows that 2 and 2 make 4 (5ms)
    
    Test Suites: 1 passed, 1 total
    Tests:       1 passed, 1 total
    Snapshots:   0 passed, 0 total
    Time:        3.11s

如果您曾经使用过 Jasmine 或其他测试框架，Jest允许我们使用describe和it来嵌套测试。您使用多少嵌套取决于您。我喜欢嵌套我的测试，这样所有传递给describe和it的描述字符串几乎就像一个句子一样。

当涉及到实际断言时，您需要将要测试的内容包装在expect()调用中，然后在其上调用断言。在这种情况下，我们使用了toBe。您可以在[Jest文档][Jest 2]中找到所有可用断言的列表。toBe使用===来检查给定值是否与测试的值匹配。通过本教程，我们将遇到一些Jest的断言。

### 测试业务逻辑 ###

我们将测试我们的第一个状态函数`toggleDone`。 `toggleDone`接收当前状态和我们想要切换的todo的ID。每个todo都有一个完成属性，而toggleDone应该将其从true切换为false，反之亦然。 *注意：如果您正在跟随本文，确保已经克隆了[代码库][GitHub]，并将`app`文件夹复制到包含您的`__tests__`文件夹的同一目录中。您还需要安装所有应用程序的依赖项（例如React）。在克隆存储库后运行`npm install`即可确保全部安装完成。*

我将从`app/state-functions.js`导入函数并设置测试的结构开始。当Jest允许您使用`describe`和`it`进行嵌套时，您也可以使用test，这通常更易于阅读。test只是Jest it函数的别名，但有时可以使测试更易于阅读，减少嵌套。例如，以下是我如何使用嵌套的`describe`和`it`调用编写该测试的方法：

import { toggleDone } from '../app/state-functions';
    
    describe('toggleDone', () => {
      describe('when given an incomplete todo', () => {
        it('marks the todo as completed', () => {
        });
      });
    });

这是`test`用法：

import { toggleDone } from '../app/state-functions';
    
    test('toggleDone completes an incomplete todo', () => {
    });

测试仍然很容易读懂，但现在缩进少了一些。这主要取决于个人喜好；选择您更喜欢的风格即可。

现在我们可以编写断言了。首先，我们将创建我们的起始状态，然后将其传递到`toggleDone`中，以及我们要切换的todo的ID。`toggleDone`将返回我们的最终状态，然后我们可以对其进行断言：

import { toggleDone } from "../app/state-functions";
    
    test("tooggleDone completes an incomplete todo", () => {
      const startState = [{ id: 1, done: false, text: "Buy Milk" }];
      const finState = toggleDone(startState, 1);
    
      expect(finState).toEqual([{ id: 1, done: true, text: "Buy Milk" }]);
    });

现在我使用`toEqual`进行断言。您应该使用`toBe`来测试原始值（例如字符串和数字），使用`toEqual`测试对象和数组。`toEqual`是专门用于处理数组和对象的，并且会递归检查给定对象内的每个字段或项目以确保其匹配。

有了这个，我们现在可以运行`npm test`并看到我们的状态函数测试通过：

PASS  __tests__/state-functions.test.js
      ✓ tooggleDone completes an incomplete todo (9ms)
    
    Test Suites: 1 passed, 1 total
    Tests:       1 passed, 1 total
    Snapshots:   0 passed, 0 total
    Time:        3.166s

### 配置热更新 ###

在更改测试文件后，手动再次运行`npm test有点繁琐`。 Jest最好的功能之一是其监视模式，它会监视文件更改并相应地运行测试。它甚至可以根据更改的文件确定要运行的子集测试。它非常强大和可靠，您可以在监视模式下运行Jest，并在整天编写代码时保留它。

要在监视模式下运行它，您可以运行`npm test -- watch`。在第一个--之后传递给`npm test`的任何内容都将直接传递给基础命令。这意味着这两个命令是等效的：

*  `npm test -- --watch`
 *  `jest --watch`

我建议您在另一个终端窗口中将Jest保留运行，以便在本教程的其余部分中使用。

在继续测试React组件之前，我们将在另一个状态函数上编写一个测试。在实际应用程序中，我会编写更多的测试，但是为了本教程的缘故，我将跳过其中一些。现在，让我们编写一个测试，以确保我们的deleteTodo函数正常工作。在查看下面我的编写方式之前，请尝试自己编写它并查看您的测试与我的测试有何不同。

请记住，您需要更新顶部的导入语句以导入`deleteTodo`和`toggleTodo`：

import { toggleDone, deleteTodo } from "../app/state-functions";

这是我编写测试用例：

test('deleteTodo deletes the todo it is given', () => {
      const startState = [{ id: 1, done: false, text: 'Buy Milk' }];
      const finState = deleteTodo(startState, 1);
    
      expect(finState).toEqual([]);
    });

这个测试与第一个测试并没有太大的区别：我们设置起始状态，运行我们的函数，然后对最终状态进行断言。如果您已在监视模式下运行Jest，请注意它如何检测到您的新测试并运行它，以及它运行速度的快速性！这是一种在写测试时立即得到反馈的好方法。

上面的测试还演示了测试的过程，其中包括：

*  设置
 *  执行要测试的功能
 *  对结果进行断言

通过以这种方式布局测试，您会发现更容易跟踪和处理它们。

现在我们已经满意测试我们的状态函数，让我们继续测试React组件。

### 测试 React 组件 ###

值得注意的是，默认情况下，我实际上鼓励您不要在React组件上编写太多测试。您想要非常彻底测试的任何内容，例如业务逻辑，都应该从组件中提取出来并作为独立的函数存在，就像我们之前测试的状态函数一样。尽管如此，有时测试一些React交互（例如，确保用户单击按钮时调用特定函数并传递正确参数）是很有用的。我们将从测试我们的React组件是否呈现正确的数据开始，然后再看看如何测试交互。

为了编写测试，我们将安装`Enzyme`，这是由`Airbnb`编写的包装库，使测试React组件变得更加容易。

注意：自本文首次编写以来，React团队已经转向`Enzyme`，并推荐使用`[React Testing Library（RTL）](https://testing-library.com/docs/react-testing-library/intro)`。阅读该页面很值得一看。如果您正在维护已经使用Enzyme测试的代码库，则无需放弃所有内容并转移，但对于新项目，我建议考虑`RTL`。

除了`Enzyme`之外，我们还需要安装适用于我们使用的React版本的适配器。对于React v16，使用enzyme-adapter-react-16，但对于React v17，目前没有官方适配器可用，因此我们必须使用非官方版本。请注意，该软件包旨在作为临时措施，直到正式支持发布，并将在那时被弃用。

npm install --save-dev enzyme @wojtekmaj/enzyme-adapter-react-17

我们需要对`Enzyme` 进行少量设置。在项目的根目录中，创建`setup-tests.js`以下代码并将其放入其中：

import { configure } from 'enzyme';
    import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
    
    configure({ adapter: new Adapter() });

然后，我们需要告诉Jest在执行任何测试之前为我们运行此文件。我们可以通过配置`setupFilesAfterEnv`选项来实现这一点。您可以将Jest配置放在自己的文件中，但我喜欢使用`package.json`并将东西放在jest对象中，Jest也会自动检测到它：

"jest": {
      "setupFilesAfterEnv": [
        "./setup-tests.js"
      ]
    }

现在我们准备编写一些测试了！让我们测试该`Todo`组件是否在段落内呈现其待办事项的文本。首先我们将创建`__tests__/todo.test.js`并导入我们的组件：

import Todo from '../app/todo';
    import React from 'react';
    import { mount } from 'enzyme';
    
    test('Todo component renders the text of the todo', () => {
    });

从`Enzyme`导入了`mount`。`mount`函数用于呈现我们的组件，然后允许我们检查输出并对其进行断言。即使我们在`Node`中运行测试，我们仍然可以编写需要DOM的测试。这是因为Jest配置了`jsdom`，一个在`Node`中实现DOM的库。这很好，因为我们可以编写基于DOM的测试，而无需每次启动浏览器进行测试。

可以使用`mount`来创建我们的`Todo`

const todo = { id: 1, done: false, name: 'Buy Milk' };
    const wrapper = mount(
      <Todo todo={todo} />
    );

然后，我们可以调用`wrapper.find`，给它一个CSS选择器，以查找我们希望包含Todo文本的段落。这个API可能会让您想起jQuery，这是有意设计的。这是一个在渲染的输出中搜索匹配元素的非常直观的API。

const p = wrapper.find('.toggle-todo');

最后，我们可以断言其中的文本是`Buy Milk`：

expect(p.text()).toBe('Buy Milk');

完整的测试用例是这样的：

import Todo from '../app/todo';
    import React from 'react';
    import { mount } from 'enzyme';
    
    test('TodoComponent renders the text inside it', () => {
      const todo = { id: 1, done: false, name: 'Buy Milk' };
      const wrapper = mount(
        <Todo todo={todo} />
      );
      const p = wrapper.find('.toggle-todo');
      expect(p.text()).toBe('Buy Milk');
    });

现在我们有了一个测试，可以检查我们是否成功地渲染了todos。 接下来，让我们看一下如何使用Jest的spy功能来断言具有特定参数的函数被调用。在我们的情况下很有用，因为我们有一个Todo组件，它被赋予了两个函数作为属性，当用户单击按钮或执行交互时应该调用这些函数。

在这个测试中，我们将断言当`Todo`被单击时，组件将调用它所赋予的`doneChange`属性：

test('Todo calls doneChange when todo is clicked', () => {
    });

我们希望有一个可以用来跟踪其调用及其调用参数的函数。然后，我们可以检查当用户单击Todo时，`doneChange`函数是否被调用，并且被调用时使用了正确的参数。幸运的是，Jest在功能上提供了这个功能来使用`spy（间谍）`。`spy`是一种函数，其实现方式并不重要，您只需要关心它何时以及如何被调用。可以将其想象为您在侦察该函数。要创建一个`spy`，我们调用`jest.fn()`：

const doneChange = jest.fn();

这提供了一个函数，我们可以对其进行监视并确保其被正确调用。让我们从使用正确的props来呈现我们的`Todo`开始：

const todo = { id: 1, done: false, name: 'Buy Milk' };
    const doneChange = jest.fn();
    const wrapper = mount(
      <Todo todo={todo} doneChange={doneChange} />
    );

接下来，我们可以再次查找我们的段落，就像在前面的测试中一样：

const p = wrapper.find(".toggle-todo");

然后我们可以调用`simulate`它来模拟用户事件，并`click`作为参数传递：

p.simulate('click');

现在我们只需要断言我们的spy函数是否被正确调用。在这种情况下，我们期望它被调用时使用了ID为`1`的todo。我们可以使用`expect(doneChange).toBeCalledWith(1)`来断言这一点，然后我们的测试就完成了！

test('TodoComponent calls doneChange when todo is clicked', () => {
      const todo = { id: 1, done: false, name: 'Buy Milk' };
      const doneChange = jest.fn();
      const wrapper = mount(
        <Todo todo={todo} doneChange={doneChange} />
      );
    
      const p = wrapper.find('.toggle-todo');
      p.simulate('click');
      expect(doneChange).toBeCalledWith(1);
    });

### 结论 ###

Facebook很久以前就发布了Jest，但最近已经被广泛采用和改进。它已经快速成为JavaScript开发人员的首选，而且它只会变得更好。如果你以前尝试过Jest并且不喜欢它，我无法足够地鼓励你再次尝试它，因为现在它基本上是一个完全不同的框架。它快速，重复运行规格非常出色，提供了出色的错误消息，并且有一个出色的表达式API，用于编写良好的测试。

**最后：**下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取**【保证1****00%免费】**

![8b0171187dce405e878f274a8cdd9ec0.png][]

#### **软件测试面试文档** ####

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

![a3e4226c935c4242804cbdf26b571bc6.png][]

![81e382959a4944be842797dd880ceac8.gif][]

[Jest]: https://link.juejin.cn?target=https%3A%2F%2Ffacebook.github.io%2Fjest%2F
[React]: https://link.juejin.cn?target=https%3A%2F%2Ffacebook.github.io%2Freact%2Findex.html
[React 1]: https://img-blog.csdnimg.cn/img_convert/a5225df8854873b3fe0fd6749c48aa67.webp?x-oss-process=image/format,png
[GitHub]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fsitepoint-editors%2Ftesting-react-with-jest
[Link 1]: https://link.juejin.cn?target=https%3A%2F%2Fsitepoint-editors.github.io%2Ftesting-react-with-jest
[webpack]: https://link.juejin.cn?target=https%3A%2F%2Fwebpack.github.io%2Fdocs%2Ftutorials%2Fgetting-started%2F
[Webpack]: https://link.juejin.cn?target=https%3A%2F%2Fmedium.com%2F%40dabit3%2Fbeginner-s-guide-to-webpack-b1f1a3638460%23.f6vf3p9ag
[Jest 1]: https://link.juejin.cn?target=https%3A%2F%2Fjestjs.io%2F
[Link 2]: https://link.juejin.cn?target=https%3A%2F%2Fbabeljs.io%2Fdocs%2Fen%2Fusage
[Jest 2]: https://link.juejin.cn?target=https%3A%2F%2Fjestjs.io%2Fdocs%2Fen%2Fapi
[8b0171187dce405e878f274a8cdd9ec0.png]: https://img-blog.csdnimg.cn/8b0171187dce405e878f274a8cdd9ec0.png
[a3e4226c935c4242804cbdf26b571bc6.png]: https://img-blog.csdnimg.cn/a3e4226c935c4242804cbdf26b571bc6.png
[81e382959a4944be842797dd880ceac8.gif]: https://img-blog.csdnimg.cn/81e382959a4944be842797dd880ceac8.gif