Jest 怎么使用？Jest 入门指南-FunTeaLearn Online Web Tutorials

前言

Jest 是一个 JavaScript 的测试框架，由 Facebook 开发，它可以测试 React 应用或纯 JavaScript 应用。Jest 在测试速度和简单性方面提供了极佳的体验，测试比其他框架块很多。

本文将会介绍 Jest 的一些核心特性以及使用指南。我们会从安装 Jest 开始，然后在接下来的章节中逐一深入探讨 Jest 的各个特性。

安装

使用 Jest 首先要进行安装。你可以通过 npm 进行全局安装：

$ npm install -g jest

或在项目中安装 Jest：

$ npm install jest

当安装完成之后，Jest 将会添加如下两个脚本到 package.json 中：

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

test 命令运行 Jest。
test:watch 命令在监视模式下运行 Jest ，以便对应用的任何变化进行测试。

Jest 的基本使用

下面我们来介绍 Jest 的基本使用，包括测试文件和模块的测试方法。

普通函数的测试

现在我们来尝试测试两个普通的 JavaScript 函数，其中一个函数的功能是将两个数相加，而另一个函数的功能是将一个字符串反转。我们将会一个一个示例地介绍如何使用 Jest 进行测试。

创建测试文件

首先，我们要创建一个测试文件。Jest 期望测试文件是与被测试模块相同的目录下具有 .test.js 或 .spec.js 扩展名的文件。因此，我们将会创建一个文件叫 math.test.js 用于测试用例如下：

// www.javascriptcn.com code example
/**
 * math.js
 */
export function sum(a, b) {
  return a + b;
}

export function reverseString(str) {
  return str.split('').reverse().join('');
}

编写测试代码

接下来，我们要编写测试代码。Jest 中有两个重要的全局函数，用于编写和运行测试用例： describe 和 it。这两个函数可以帮助我们组织测试代码并生成易于阅读的测试报告。我们将会使用这些函数编写我们的测试代码。

// www.javascriptcn.com code example
/**
 * math.test.js
 */
import { sum, reverseString } from './math';

describe('sum function', () => {
  it('should add two numbers', () => {
    expect(sum(1, 1)).toBe(2);
    expect(sum(3, 3)).toBe(6);
    expect(sum(5, 5)).toBe(10);
  });
});

describe('reverseString function', () => {
  it('should reverse a string', () => {
    expect(reverseString('hello')).toBe('olleh');
    expect(reverseString('world')).toBe('dlrow');
    expect(reverseString('coding')).toBe('gnidoc');
  });
});

在测试代码中，我们使用 describe 函数来定义测试用例。测试用例是一组逻辑相关的测试，可以描述某个功能或特性。

在测试用例中，我们使用 it 函数来具体描述一个测试用例。每个测试用例都应该有一个描述性的名称。例如，我们的第一个测试用例是“should add two numbers”，它描述了一个测试代码的功能。

在每个测试用例中，我们使用 Jest 中的 expect 函数来验证函数的输出。我们使用函数的输入和期望输出之间的断言来描述测试。断言是一种声明应该是真实的事物的表达式。在 Jest 中，断言是使用 expect 函数创建的。

React 组件的测试

Jest 可以轻松地测试 React 组件。我们来介绍一下如何测试 React 组件。

现在，我们要测试一个简单的 React 组件，该组件主要负责显示一个 props 属性。

创建测试文件

首先，我们要创建一个测试文件。Jest 期望测试文件是 .test.js 或 .spec.js 扩展名的文件，但是如果你要测试 React 组件，你经常会使用 .tsx 文件。因为我们要测试 React 组件，所以我们将会创建一个名为 my-component.test.tsx 的文件来测试我们的组件。

// www.javascriptcn.com code example
/**
 * my-component.tsx
 */
import React from 'react';

interface MyComponentProps {
  label: string;
}

const MyComponent: React.FC<MyComponentProps> = (props) => {
  return <div>{props.label}</div>;
};

export default MyComponent;

编写测试代码

接下来，我们要编写测试代码。对于 React 组件来说，测试的重点是检查组件是否正确渲染。在我们的例子中，我们需要检查组件是否渲染出了正确的 props 属性。

我们将会使用 react-testing-library 一款测试 React 组件的工具来帮助我们编写测试用例。 react-testing-library 不依赖任何DOM库，它可以轻松地测试 React 组件。

// www.javascriptcn.com code example
/**
 * my-component.test.tsx
 */
import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './my-component';

test('renders component with label', () => {
  const { getByText } = render(<MyComponent label="hello" />);
  const linkElement = getByText(/hello/i);
  expect(linkElement).toBeInTheDocument();
});

在测试代码中，我们使用 render 函数来渲染 React 组件。我们使用 getByText 函数来查找组件中包含的文本。如果文本存在，那么测试就会通过。

Jest 指南

在接下来的章节中，我们将介绍 Jest 的一些高级特性，例如测试生命周期、测试异步代码等等。

测试生命周期

Jest 提供了可以在测试开始和结束时自动执行的生命周期钩子。我们可以在钩子函数中执行测试前/后的一些操作。例如，我们可以在测试运行之前创建一个数据库连接，在测试运行之后关闭数据库连接。

Jest 的生命周期钩子如下：

beforeAll: 在运行测试用例之前运行一次。在该块中设置或建立需要用于测试的状态或对象。在整个文件中只运行一次。
beforeEach: 在每次运行测试之前运行。在该块中，您可以重置或更改测试中使用的任何状态或对象的初始值。
afterAll: 在该文件的所有测试运行之后运行一次。
afterEach: 在运行每个测试之后运行。在该块中，您可以进行清理或释放任何资源，以便测试始终在干净的状态下运行。

以下是一个使用生命周期函数的示例：

// www.javascriptcn.com code example
beforeAll(() => {
  // 设置测试用例需要用到的状态或对象
});

beforeEach(() => {
  // 重置或更改测试状态或对象的初始值
});

afterEach(() => {
  // 清理或释放任何资源
});

afterAll(() => {
  // 移除已经设置的状态或释放用于测试的对象
});

测试异步代码

在异步代码中有两种最常见的情况。一个是回调函数，另一个是 promise。Jest 可以测试这两种异步代码。

我们来看一个使用回调函数的例子。我们要测试一个异步函数，该函数从 API 中获取用户数据，并在获取完成时调用回调函数。

/**
 * user.js
 */
export function getUserData(callback) {
  setTimeout(() => {
    callback({ name: '张三', age: 20 });
  }, 1000);
}

首先，我们来编写测试代码。

// www.javascriptcn.com code example
/**
 * user.test.js
 */
import { getUserData } from './user';

test('getUserData with callback', (done) => {
  function callback(data) {
    expect(data.name).toBe('张三');
    expect(data.age).toBe(20);
    done();
  }

  getUserData(callback);
});

在测试代码中，我们使用 done 参数来告诉 Jest 这是一个异步测试，测试完成后需要手动调用 done 来标记测试完成。在此之前，Jest 会等待测试的返回结果。

接下来，我们来演示如何使用异步函数测试异步代码。首先，我们需要编写一个异步函数，该函数返回一个 Promise。

// www.javascriptcn.com code example
/**
 * user.js
 */
export function getUserData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: '张三', age: 20 });
    }, 1000);
  });
}

接下来，我们将编写一个 Jest 测试代码。在测试代码中，我们使用 async 关键字定义一个异步测试。然后，我们使用 await 关键字等待函数返回结果。

// www.javascriptcn.com code example
/**
 * user.test.js
 */
import { getUserData } from './user';

test('getUserData with promise', async () => {
  const data = await getUserData();
  expect(data.name).toBe('张三');
  expect(data.age).toBe(20);
});

在测试代码中，我们使用异步 getUserData() 函数来返回一个 Promise。在 expect 函数中，我们使用标准的形式进行断言，验证信息是否正确。

结论

Jest 是一个优秀的 JavaScript 测试框架，可以快速、高效地测试 React 组件或纯 JavaScript 应用。在本文中，我们介绍了 Jest 的安装、基本用法以及测试生命周期和测试异步代码。如果你不熟悉 Jest，那么本文就为你提供了一个入门指南。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67137563ad1e889fe20d1678

Jest 怎么使用？Jest 入门指南

前言

安装