真正的 Jest 测试入门指南-JavaScript中文网-JavaScript教程资源分享门户

Jest 是一个流行的 JavaScript 测试框架。它广泛用于前端开发中的单元测试、集成测试和端到端测试。借助于 Jest, 我们能够轻易地对我们的代码进行测试，提高代码的质量与稳定性，避免一些人为造成的错误。本文将为您提供 Jest 测试的入门指南。

Jest 的安装

Jest 的安装非常简单，只需要在终端中输入如下命令即可：

npm install --save-dev jest

安装完成后，在项目的 package.json 文件中会自动生成并添加 Jest 的相关配置信息。如果您的项目是用 yarn 管理的，则可以执行以下命令安装 Jest：

yarn add jest --dev

编写测试用例

Jest 入门的第一步就是编写测试用例了。测试用例是一组可重复执行的代码集合，用来验证被测试代码是否符合预期行为。假设我们有如下一个简单的函数：

function sum(a, b) {
  return a + b;
}

我们可以通过 Jest 来编写一个测试用例：

test('sum adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

以上代码中 test 是 Jest 中的测试函数，它的第一个参数是测试的描述，第二个参数是测试执行的回调函数。在回调函数中，我们可以使用 expect 和 matcher 来断言测试代码的预期输出。例如：expect(sum(1, 2)).toBe(3)，它的意思是预期 sum(1, 2) 的输出结果是 3。如果测试结果符合预期，测试就会通过。如果测试结果与预期不符，测试就会失败。

还可以写一个测试用例来检测异常状态下的行为：

test('sum throws an error when a string is passed in', () => {
  expect(() => {
    sum(1, '2');
  }).toThrow();
});

在上面的测试中，我们传递的第二个参数给 sum 函数是一个字符串 '2'，这不应该是一个有效的数字参数。我们期望 sum 函数会抛出一个错误，这时候我们就可以使用 toThrow() 来检测函数是否抛出了一个错误。

Jest 的常用配置

Jest 配置分为全局配置和项目配置两种。全局配置指的是我们在全局设置的默认配置，可以作为 Jest 的默认配置在项目中引用。而项目配置指的是我们在项目中的配置覆盖全局配置的无效性。下面列举一些 Jest 常用的配置：

覆盖率报告

默认情况下，Jest 会收集测试的覆盖信息，并打印到终端中。但如果想用更友好的方式呈现，我们可以使用 coverage 选项来生成一个覆盖率报告。只需要在配置文件中设置：

"jest": {
  "collectCoverage": true,
  "coverageReporters": ["text", "html"]
}

以上配置会在运行测试时收集覆盖率信息，并输出统计数据结果。coverageReporters 选项指定了生成测试覆盖率报告的类型，默认使用 text，如果还想要生成 html 报告，则需要添加 html，但需要安装相关插件，例如：

npm install --save-dev jest-html-reporters

模拟数据

在测试中，通常需要模拟一个假数据来测试功能是否正确。Jest 可以使用 mock 来模拟数据，可以使用 jest.fn() 或 jest.mock()。

我们可以使用 jest.fn()创建一个模拟函数：

const myMockFn = jest.fn((x) => 42 + x)

expect(myMockFn(1)).toBe(43)
expect(myMockFn(2)).toBe(44)

上面代码中，我们创建了一个名为 myMockFn 的模拟函数并调用它，此函数会返回传入值加 42 的结果。

我们还可以使用 jest.mock() 来创建模拟函数：

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

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

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

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

以上示例中，我们使用 jest.mock() 来模拟了一下第三方库 axios 的请求，这时候就不会真正去请求服务端。而我们将模拟数据直接返回 data，在测试时直接使用 expect 断言返回的结果是否符合预期，从而保证测试的正确性。

异步测试

Jest 默认是同步执行测试用例的，但是在实际项目开发中，我们大概率需要对异步函数进行测试。这时候可以使用以下几种方式：

使用回调函数

在测试上下文中通过传递一个 done 参数，让 Jest 知道回调函数已经执行完毕：

test('the data is peanut butter', done => {
  function callback(data) {
    expect(data).toBe('peanut butter');
    done();
  }

  fetchData(callback);
});

在上面的代码中，我们传递一个 done 回调参数，通过回调函数的执行结果告诉 Jest 已完成测试。

使用 Promise

如果被测试代码返回的是 Promise 对象，我们可以使用以下方式测试：

test('the data is peanut butter', () => {
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
});

在这种情况下，Jest 会等待 Promise 完成，在 Promise 完成之后，才会将测试视为完成。

使用 async/await

如果您的代码支持 async/await，则可以使用以下方式测试：

test('the data is peanut butter', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

如果您的测试代码中使用了异步操作，一定要确保测试在正确的时机结束或者结束时通过 done 或 Promise 来告知 Jest。

Jest 的高级用法

上面我们已经介绍了 Jest 的基本用法，下面进一步了解一下 Jest 的高级用法。

Snapshot 测试

Snapshot 测试是 Jest 中非常实用和强大的工具之一。它的原理是将测试用例返回的内容，和一个预先定义好的真实输出文本进行比较。它将快速检查 UI 是否已更改，并标记失败的测试。

我们可以使用 Jest 的 toMatchSnapshot() 方法来测试我们的 React 组件的渲染输出情况。例如：

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

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

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

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

在测试中，当我们运行 toMatchSnapshot() 时，在第一次进行快照测试时，Jest 会自动将组件渲染到一个字符串中，并和预先定义好的真实输出文本进行比较，每次运行测试时检查是快照是否发生了变化，如果标记为失败则暴露实际差异，而提示输出结果随之生成。如果我们修改了组件的渲染，都会重新生成快照，并且因为 Jest 能快速识别差异，所以 Snapshot 测试会让我们的测试变得高效。

测试用例分组

在大型项目中，测试用例数量可能出乎我们的想象。此时，将使用分组测试是非常好的思路，在 Jest 中可以使用 describe 来分组测试：

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

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

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

在上面的示例中，我们将测试用例分组，每个分组都有自己的描述和相应的测试。

Mock 定时器

另外一个比较常用的功能是异步代码的异步代码测试函数。例如，一个需要延时执行1000毫秒的异步函数，我们有时不想浪费时间等待这个函数执行完成，而希望像快进功能一样直接跳到结果。为了模拟定时器，我们可以使用 Jest 提供的 jest.useFakeTimers() 来模拟在定时器执行中产生的所有操作。

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

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

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

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

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

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

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

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

在这个示例中，我们使用了 jest.useFakeTimers 来创建一个假的定时器，这样我们就可以快进定时器执行流程，缩短测试用时了。

结语

Jest 是一个非常实用且常用的测试框架，它可以帮助开发人员在保证项目质量过程中提高开发效率。本篇文章详细介绍了 Jest 的安装及配置，测试用例编写，Jest 的常用配置项，以及 Jest 的高级操作及使用技巧。希望本文可以帮助您更好地了解 Jest，并更高效地进行 JavaScript 的单元测试。

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

真正的 Jest 测试入门指南