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的原创文章，尽在："汪子熙":