Jest 测试中的 Mock 数据-JavaScript中文网-JavaScript教程资源分享门户

Jest 测试中的 Mock 数据

当编写前端程序时，为了保证代码的完整性，我们通常会使用自动化测试工具来确保代码的正确性。而在这些测试工具中，Jest 是一个非常常用和流行的 JavaScript 测试框架。Jest 的最大优势之一就是它内置了丰富的 Mock 函数库，这些函数可以帮助我们在测试中模拟出许多真实的情况，使我们可以更加精准地进行代码测试。

那么，Jest 中的 Mock 数据是什么呢？在 Jest 中，mock 数据是指一个被模拟出来的对象，它们可以代理到任何 JavaScript 对象，变量或者函数。在测试中，我们通常使用 mock 数据来代替一些不可用的、不安全的或者难以测试的的函数或者对象。

下面介绍几个 Jest 测试中常用的 mock 数据。

模拟 HTTP 请求

在前端项目中，我们通常使用异步请求来获取数据。而这些异步请求需要发送给服务器。在测试过程中，通常我们并不会实际地发送这些请求，而是需要模拟这些请求。下面是一个代码示例：

// javascriptcn.com 代码示例
import axios from 'axios';

jest.mock('axios');

test('the fetchUrl function', async () => {
  const data = {
    key1: 'value1',
  };

  axios.get.mockResolvedValue(data);

  const fetchUrl = jest.fn(() => axios.get('/url/to/fetch'));

  await fetchUrl();

  expect(fetchUrl).toHaveBeenCalled();

  expect(axios.get).toHaveBeenCalledWith('/url/to/fetch');
});

在上面的示例中，我们使用 Jest 的 spyOn() 函数来代替真实的 axios 对象，然后使用 jest.mock() 函数来模拟 axios 的 get 请求，并设定其返回的值。接着，我们使用 jest.fn() 函数来监视 fetchUrl() 函数的调用，并在调用结束后检查这个函数是否被调用，并且是否被调用了 axios.get() 函数。

模拟网络连接超时

在实际的使用中，网络请求有时会由于各种原因出现超时现象。而在测试中，我们需要准确地模拟出网络连接超时的状态，以确保我们的代码在这种情况下的行为。

下面是一个使用 Jest 来模拟网络连接超时情况的代码示例：

// javascriptcn.com 代码示例
import axios from 'axios';

jest.mock('axios');

test('the fetchUrl function', async () => {
  axios.get.mockImplementation(() => {
    throw new Error('Network Error');
  });

  const fetchUrl = jest.fn(() => axios.get('/url/to/fetch'));

  await expect(fetchUrl()).rejects.toThrow();

  expect(fetchUrl).toHaveBeenCalled();
});

在上面的示例中，我们通过调用 axios.get.mockImplementation() 函数来设置 Network Error，来模拟一个网络连接超时的错误。需要注意的是，在模拟过程时我们使用了 expect(fetchUrl()).rejects.toThrow() 函数来检查是否有异常抛出。

模拟其他非同步行为

在 Jest 中，我们也可以模拟使用 setTimeout()、Promise 和其它普通的函数等非同步行为。下面是一个模拟异步行为的示例：

// javascriptcn.com 代码示例
function fetchData(callback) {
  return setTimeout(() => {
    callback('data');
  }, 1000);
}

test('test fetchData', async () => {
   const callback = jest.fn(data => {
     expect(data).toBe('data');
   });
   
   fetchData(callback);
  
   expect(callback).not.toBeCalled();
  
   await new Promise(resolve => setTimeout(resolve, 1000));
  
   expect(callback).toBeCalled();
});

在上面的示例中，我们传入 jest.fn() 函数作为 fetchData() 函数的回调，并且使用 await new Promise() 函数来等待 setTimeout() 的完成，以确保测试可以得到预期的结果。

总结

Jest Mock 数据是我们在 JavaScript 项目中测试过程种常用的模拟对象或者函数。本文介绍了 Jest 测试中常用的 mock 数据，包括模拟 http 请求、模拟网络连接超时和模拟其他非同步行为。Mock 数据可以帮助我们更加精确地测试 JavaScript 代码，增加代码质量和稳定性。

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