Jest Tutorial for Beginners: Getting Started With JavaScript Testing

Jest 是一个 JavaScript 测试运行器，即用于创建、运行和构建测试的 JavaScript 库。

Jest 作为 NPM 包发布，您可以将其安装在任何 JavaScript 项目中。 Jest 是当今最流行的测试运行器之一，也是 React 项目的默认选择。

Setting up the project

与每个 JavaScript 项目一样，您需要一个 NPM 环境（确保在您的系统上安装了 Node）。 创建一个新文件夹并使用以下命令初始化项目：

mkdir getting-started-with-jest && cd $_
npm init -y

接着：

npm i jest --save-dev

让我们也配置一个 NPM 脚本来从命令行运行我们的测试。 打开 package.json 并配置一个名为 test 的脚本来运行 Jest：

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

Specifications and test-driven development

作为开发人员，我们都喜欢创意自由。 但是，在大多数情况下，当涉及到严肃的事情时，您没有那么多特权。

我们必须遵循规范，即对要构建的内容的书面或口头描述。

在本教程中，我们从项目经理那里得到了一个相当简单的规范。 一个超级重要的客户端需要一个 JavaScript 函数来过滤一个对象数组。

对于每个对象，我们必须检查一个名为“url”的属性，如果该属性的值与给定的术语匹配，那么我们应该在结果数组中包含匹配的对象。

作为一名精通测试的 JavaScript 开发人员，您希望遵循测试驱动开发，这是一种在开始编码之前强制编写失败测试的学科。

默认情况下，Jest 希望在您的项目文件夹中名为 tests 的文件夹中找到测试文件。 创建新文件夹：

mkdir tests

接下来在 tests 中创建一个名为 filterByTerm.spec.js 的新文件。 您可能想知道为什么扩展名包含 .spec。这是从 Ruby 借用的约定，用于将文件标记为给定功能的规范。

Test structure, and a first failing test

describe("Filter function", () => {
  // test stuff
});

我们的第一个朋友是 describe，一个包含一个或多个相关测试的 Jest 方法。 每次你开始为一个功能编写一套新的测试时，都将它包装在一个 describe 块中。 如您所见，它需要两个参数：一个用于描述测试套件的字符串，以及一个用于包装实际测试的回调函数。

接下来我们将遇到另一个名为 test 的函数，它是实际的测试块：

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    // actual test
  });
});

这里 describe 的类型是 jest.Describe, 该函数接受两个输入参数，其类型分别为字符串和 jest.EmptyFunction

而 jest.EmptyFunction, 定义很简单：

type EmptyFunction = () => void;

此时我们已准备好编写测试。 请记住，测试是输入、功能和预期输出的问题。 首先让我们定义一个简单的输入，一个对象数组：

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];
  });
});

接下来，我们将定义预期结果。 根据规范，被测函数应排除 url 属性与给定搜索词不匹配的对象。

例如，我们可以期待一个包含单个对象的数组，给定“链接”作为搜索词：

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];

    const output = [{ id: 3, url: "https://www.link3.dev" }];
  });
});

现在我们已准备好编写实际测试。 我们将使用 expect 和一个 Jest 匹配器来检查我们虚构的（目前）函数在调用时是否返回预期结果。

这是测试：

expect(filterByTerm(input, "link")).toEqual(output);

完整的代码：

describe("Filter function", () => {
  test("it should filter by a search term (link)", () => {
    const input = [
      { id: 1, url: "https://www.url1.dev" },
      { id: 2, url: "https://www.url2.dev" },
      { id: 3, url: "https://www.link3.dev" }
    ];

    const output = [{ id: 3, url: "https://www.link3.dev" }];

    expect(filterByTerm(input, "link")).toEqual(output);

  });
});

执行命令行：npm test
测试通过：

测试代码的 coverage：

npm test – --coverage

更多Jerry的原创文章，尽在：“汪子熙”。