Jest 如何 mock 掉第三方模块？

前言

在前端开发过程中，我们经常需要使用第三方模块来协助我们开发应用程序，如 axios、lodash、moment 等等。这些第三方模块可以大大减轻我们的工作量，提高开发效率。但我们在编写单元测试时，这些依赖却成为了一个难题，因为它们会对测试结果产生影响，还容易受到外部因素的影响，导致测试结果不稳定。因此，我们需要使用 Jest 的 mock 功能来模拟这些第三方模块，保证我们的测试结果稳定而可靠。

Jest 的 mock 功能

Jest 是一个针对 JavaScript 的测试框架，它能够帮助我们编写清晰、简单、可维护的测试用例。Jest 的 mock 功能能够帮助我们模拟函数、模块、对象等，使我们得以在单元测试中间隔离尽可能的代码，使测试更加独立、可靠。

Mock 第三方模块

在 Jest 中，我们可以使用 jest.mock() 方法来实现对第三方模块的 mock。考虑一个简单的例子：我们使用 axios 发送 HTTP 请求，我们希望能够对其进行 mock，以减少对外部资源的依赖，同时使测试更加稳定。

import axios from 'axios';

export function fetchData() {
  return axios.get('/api/data');
}

我们可以使用如下方式进行 mock，其中 jest.fn() 为 Jest 提供的 mock 函数：

jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: 'mock data' }))
}));

import { fetchData } from '../fetch';

test('fetchData test', () => {
  return fetchData().then(res => {
    expect(res.data).toBe('mock data');
  });
});

复杂 mock

有时，我们需要模拟一个更加复杂的场景，比如模拟一个具有异步操作的模块，或者模拟一个对象的属性。下面，我们考虑模拟一个具有异步操作的模块：

export function fetchAsyncData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('async mock data');
    }, 1000);
  });
}

我们可以使用 Jest 提供的 mockResolvedValueOnce() 方法来对异步函数进行 mock：

import { fetchAsyncData } from '../fetchAsync';

jest.useFakeTimers();

test('fetchAsyncData test', () => {
  const mockFn = jest.fn().mockResolvedValueOnce('async mock data');

  return mockFn().then(res => {
    expect(res).toBe('async mock data');
  });
});

总结

在单元测试中 mock 依赖模块是避免出现危险的测试结果，保证测试数据的稳定性和可重复性，提高测试效率，帮助更好的开发应用程序。在 Jest 中，我们可以使用 jest.mock() 方法来对第三方模块进行 mock，使得我们能够隔离不同的测试场景，提高测试可靠性。

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