如何正确撰写 Jest 测试用例-JavaScript中文网-JavaScript教程资源分享门户

Jest 是一个广泛使用的 JavaScript 测试框架，它的功能和性能都非常强大。在前端开发中，正确撰写 Jest 测试用例能够帮助我们轻松地更新和维护代码，提高代码质量，并保持代码稳定性。本文将详细介绍如何正确撰写 Jest 测试用例，并附上示例代码。

一、编写基础测试用例

首先来编写一些基础的测试用例。假设我们有一个名为 utils.js 的工具函数文件，其中有一个函数 sum 用于求两个数的和。我们需要编写一个测试用例来验证其正确性。

// javascriptcn.com 代码示例
// utils.js
export function sum(a, b) {
  return a + b;
}

// utils.test.js
import { sum } from './utils';

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

在上面的测试用例中，我们使用了 Jest 提供的 test 函数来编写测试用例。test 函数接收两个参数，第一个参数是测试用例的描述，第二个参数是测试用例的执行函数。在执行函数中，我们可以使用 Jest 提供的 expect 函数来进行断言，确保测试结果符合预期。

在上面的测试用例中，我们使用 toBe 方法断言 sum(1, 2) 的结果是否等于 3。如果测试结果不符合预期，测试就会失败，我们需要根据失败信息来调整代码或测试用例。

二、使用异步测试

在实际的开发中，我们经常需要进行异步操作，如异步请求、异步读写文件等。这时就需要使用 Jest 的异步测试功能来编写测试用例。

1. 回调函数方式

假设我们有一个异步请求函数 fetchData，返回一个 Promise 对象，我们需要编写一个测试用例来验证该函数是否能够正确地获取数据。

// javascriptcn.com 代码示例
// utils.js
export function fetchData() {
  return fetch('/api/data').then(res => res.json());
}

// utils.test.js
import { fetchData } from './utils';

test('fetches data from server', done => {
  fetchData().then(data => {
    expect(data).toEqual({ name: 'John', age: 30 });
    done();
  });
});

在上面的测试用例中，我们使用了 Jest 提供的 done 回调函数来标记异步操作完成。我们也可以使用 Promise 的 then 方法来处理异步结果，但要注意使用 done 回调函数确保测试用例完成，否则测试可能会被标记为超时失败。

2. Promise 方式

除了回调函数方式，我们还可以使用 Promise 方式来进行异步测试。假设我们有一个返回 Promise 对象的异步函数 fetchData，我们需要编写一个测试用例来验证该函数是否能够正确地获取数据。

// javascriptcn.com 代码示例
// utils.js
export function fetchData() {
  return fetch('/api/data').then(res => res.json());
}

// utils.test.js
import { fetchData } from './utils';

test('fetches data from server (promise)', () => {
  return fetchData().then(data => {
    expect(data).toEqual({ name: 'John', age: 30 });
  });
});

在上面的测试用例中，我们使用了 return 语句来确保异步测试完成。如果测试结果不符合预期，expect 语句将抛出错误，测试就会失败。

3. async/await 方式

除了回调函数方式和 Promise 方式，我们还可以使用 async/await 方式来进行异步测试。假设我们有一个返回 Promise 对象的异步函数 fetchData，我们需要编写一个测试用例来验证该函数是否能够正确地获取数据。

// javascriptcn.com 代码示例
// utils.js
export function fetchData() {
  return fetch('/api/data').then(res => res.json());
}

// utils.test.js
import { fetchData } from './utils';

test('fetches data from server (async/await)', async () => {
  const data = await fetchData();
  expect(data).toEqual({ name: 'John', age: 30 });
});

在上面的测试用例中，我们使用了 async 关键字和 await 关键字来等待异步操作完成。如果测试结果不符合预期，expect 语句将抛出错误，测试就会失败。

三、使用 Jest 提供的 Mock 功能

在实际开发中，我们可能需要对某些模块进行 Mock，以便于测试。Jest 提供了 Mock 功能，能够很方便地帮助我们 Mock 模块或者函数。

1. Mock 模块

假设我们有一个名为 utils.js 的工具函数文件，其中引用了一个名为 backend.js 的后端数据接口模块。我们需要编写一个测试用例来验证在后端数据接口出错的情况下，工具函数能否正确处理异常情况。

// javascriptcn.com 代码示例
// utils.js
import { fetchData } from './backend';

export function getParentName(childId) {
  try {
    const { data } = await fetchData(`/api/parent/${childId}`);
    return data.name;
  } catch (err) {
    console.error(`Failed to fetch data for ${childId}`);
    return '';
  }
}

// utils.test.js
import { getParentName } from './utils';
import { fetchData } from './backend';

jest.mock('./backend');

test('handles errors from backend', () => {
  fetchData.mockRejectedValueOnce(new Error('Network Error'));

  const parentName = getParentName(1);

  expect(parentName).toBe('');
});

在上面的测试用例中，我们使用了 jest.mock 函数来 Mock backend.js 模块，将其替换为一个虚拟模块用于测试。我们使用 mockRejectedValueOnce 方法模拟了一个网络错误的响应，并调用了工具函数 getParentName。测试结果应该返回一个空字符串。

2. Mock 函数

除了 Mock 模块，我们还可以使用 Jest 提供的 Mock 函数来模拟函数的行为。假设我们有一个名为 utils.js 的工具函数文件，其中引用了一个名为 backend.js 的后端数据接口模块，并且工具函数中除了请求数据，还进行了一些计算操作。我们需要编写一个测试用例来验证在请求数据出错的情况下，工具函数能否正确处理异常情况。

// javascriptcn.com 代码示例
// utils.js
import { fetchData } from './backend';

export function getParentName(childId) {
  const { data } = await fetchData(`/api/parent/${childId}`);
  const prefix = 'Parent of ';
  const suffix = ' is...';
  return prefix + data.name + suffix;
}

// utils.test.js
import { getParentName } from './utils';
import { fetchData } from './backend';

jest.mock('./backend');

test('handles errors from backend (mock function)', () => {
  const mockFetchData = jest.fn();
  mockFetchData.mockRejectedValueOnce(new Error('Network Error'));

  getParentName(1);

  expect(mockFetchData).toHaveBeenCalledTimes(1);
  expect(mockFetchData).toHaveBeenCalledWith('/api/parent/1');
});

在上面的测试用例中，我们使用了 jest.fn 函数创建了一个 Mock 函数，并使用 mockRejectedValueOnce 方法模拟了一个网络错误的响应。然后我们调用了工具函数 getParentName，在测试结果中验证了 Mock 函数 fetchData 是否正常被调用了，并且是否传入了正确的参数。

四、总结

本文详细介绍了如何正确地撰写 Jest 测试用例，并附上了相应的示例代码。正确的测试用例可以帮助我们提高代码的质量，维护代码的稳定性。除了编写基础测试用例，我们还介绍了如何使用 Jest 的异步测试功能和 Mock 功能。我们希望本文能够帮助您更好地掌握 Jest 测试框架的使用，使您的前端开发工作更加高效和质量保证。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653636587d4982a6ebe25b60