Jest 测试框架使用的学习笔记

Jest Tutorial for Beginners: Getting Started With JavaScript Testing

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

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

Jest 测试框架使用的学习笔记_第1张图片

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 测试框架使用的学习笔记_第2张图片

而 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
测试通过:
Jest 测试框架使用的学习笔记_第3张图片

测试代码的 coverage:

npm test -- --coverage

Jest 测试框架使用的学习笔记_第4张图片

更多Jerry的原创文章,尽在:"汪子熙":

你可能感兴趣的