创建 Jest 单元测试时的共通设置-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，前端单元测试已经成为了开发流程不可或缺的一环。为了确保我们代码的可靠性和稳定性，我们需要使用一个功能强大的测试框架。其中 Jest 是目前比较流行的选择。

在这篇文章中，我们将重点关注如何创建 Jest 单元测试时的共通设置，以确保我们的测试代码可以高效而准确地工作。

安装 Jest

Jest 是一个基于 JavaScript 的测试框架，可以用于编写前端和后端的测试代码。要使用 Jest，你需要首先安装它。你可以在项目根目录下运行以下命令来安装 Jest：

npm install --save-dev jest

配置 Jest

安装 Jest 后，你需要为你的项目做一些配置。Jest 配置文件是一个简单的 JavaScript 文件，可以用来配置一些 Jest 的基本设置和插件。通常，Jest 配置文件的名称为 jest.config.js。

在这个配置文件中，有许多的选项可以配置。其中，一些基本的全局配置项如下：

Test Match 函数

testMatch: ["**/__tests__/**/*.js?(x)", "**/?(*.)+(spec|test).js?(x)"]

这个选项用来配置 Jest 会搜索哪些文件来运行测试，它接受一个数组，里面包含了一些 glob 模式。默认情况下，它包含了对一些常见测试文件的支持，如：**/__tests__/**/*.js 。如果你希望 Jest 搜索特定的文件，你可以在这个数组中添加其他 glob 模式。

Test Environment

testEnvironment: "jsdom"

这个选项用来配置 Jest 这些测试运行的环境。通常情况下，我们会使用 jsdom 来模拟浏览器环境。

Collect Coverage

collectCoverage: true,

这个选项用来启用代码覆盖率检查，以确保我们的测试代码覆盖了项目代码的所有部分。当这个选项启用，Jest 会在每次测试结束后生成一个详细的代码覆盖率报告。

Code Coverage Thresholds

coverageThreshold: {
  global: {
    statements: 95,
    branches: 95,
    functions: 95,
    lines: 95,
  },
}

这个选项用来配置代码覆盖率的阈值，以确保我们的测试代码足够详尽。如果某一部分的代码覆盖率低于阈值，Jest 会提醒我们进行优化。

以上是一些常用的 Jest 全局配置项。当然，你也可以按需调整这些配置来适应你的项目需求。

编写测试代码

配置完成后，我们可以开始编写测试代码了。在 Jest 中，我们使用 test() 或 it() 函数来编写测试用例，如下所示：

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

以上代码描述了一个测试用例，测试 1 + 2 是否等于 3。

Expect 语句

在测试代码中，我们使用 expect 语句来表示一个断言。expect() 函数接受一个测试变量，并将其与期望值进行比较。

expect(1 + 2).toBe(3);

在上面的代码中，expect(1 + 2) 会返回一个 Jest 对象，它包含了一些用于比较的函数。而 toBe() 函数则表示期望测试结果等于 3。

Matchers 函数

Jest 支持大量的 Matcher 函数，用来比较不同类型的值。以下是一些常见的 Matcher 函数：

expect(value).toBe(expected)：检查值是否精确等于期望值
expect(value).toEqual(expected)：检查值是否深度等于期望值
expect(value).not.toBe(expected)：检查值是否不等于期望值
expect(value).toThrow()：检查函数是否抛出异常
expect(value).toContain(expected)：检查值是否在数组或字符串中包含期望值

Async 和 await

在编写异步测试代码时，我们需要使用 Jest 提供的异步测试 API。以下是一个例子：

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

在上面的代码中，我们使用了 async 和 await 来处理异步代码。并且在 test() 函数中添加了 async 标志，告知 Jest 这是一个异步测试函数。

运行测试

Jest 运行测试非常简单，你只需要在终端中运行以下命令即可：

npm test

在运行测试后，你会看到测试结果的详细报告。

总结

通过本文，我们学习了创建 Jest 单元测试时的共通设置，并且了解了如何编写测试代码。学习好这些技术，将有助于提高 Web 项目的质量和可靠性。

从今天开始，让我们一起努力制作高质量的 Web 项目吧！

示例代码

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

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

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

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