Jest 中 Mock and Spy 的使用示例-JavaScript中文网-JavaScript教程资源分享门户

前言

Jest 是一款由 Facebook 开源的 JavaScript 测试框架，它提供了丰富的 API 和工具，使得编写和运行测试变得更加轻松和高效。其中，Mock 和 Spy 是 Jest 中非常重要的两个概念，它们可以帮助我们在测试过程中模拟函数和对象的行为，以及监控函数的调用情况。本文将通过示例代码，详细介绍 Jest 中 Mock 和 Spy 的使用方法和技巧。

Mock 的使用示例

Mock 是 Jest 中用于模拟函数和对象的机制，它可以帮助我们在测试过程中，减少对外部依赖的影响和干扰。下面是一个简单的示例，演示了如何使用 Jest 中的 Mock API 模拟一个 HTTP 请求，并测试它的返回结果：

// javascriptcn.com 代码示例
const axios = require('axios');

function fetchData() {
  return axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.data)
    .catch(error => console.log(error));
}

test('fetchData should return post data', () => {
  const mockResponse = {
    data: {
      userId: 1,
      id: 1,
      title: 'mock title',
      body: 'mock body'
    }
  };

  jest.spyOn(axios, 'get').mockResolvedValue(mockResponse);

  return fetchData().then(data => {
    expect(data.title).toEqual('mock title');
    expect(data.body).toEqual('mock body');
  });
});

上述代码中，我们首先定义了一个 fetchData 函数，它使用 axios 库发送了一个 HTTP GET 请求，并返回了请求结果中的 data 字段。然后，我们使用 Jest 中的 spyOn 函数，对 axios.get 方法进行了 Mock，即将它替换为一个模拟函数，并使用 mockResolvedValue 方法，让它返回我们预先定义好的模拟数据。最后，在测试函数中，我们调用 fetchData 函数，并使用 expect 断言，验证返回的结果是否符合预期。

需要注意的是，我们在测试函数中使用了 return 关键字，这是因为 fetchData 函数返回的是一个 Promise 对象，如果不使用 return，测试函数会在 fetchData 函数执行完毕后立即结束，导致测试失败。使用 return 关键字可以让测试函数等待 fetchData 函数的 Promise 对象 resolve 后，再进行断言。

Spy 的使用示例

Spy 是 Jest 中用于监控函数调用情况的机制，它可以帮助我们验证函数是否被正确调用，并统计函数被调用的次数和参数。下面是一个示例，演示了如何使用 Jest 中的 Spy API 监控一个函数的调用情况：

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

test('sum should be called with correct arguments', () => {
  const spy = jest.spyOn(global, 'sum');
  const result = sum(1, 2);

  expect(spy).toHaveBeenCalled();
  expect(spy).toHaveBeenCalledTimes(1);
  expect(spy).toHaveBeenCalledWith(1, 2);

  spy.mockRestore();
});

上述代码中，我们首先定义了一个 sum 函数，它接受两个参数，返回它们的和。然后，我们使用 Jest 中的 spyOn 函数，对全局的 sum 函数进行了 Spy，即对它的调用情况进行监控。在测试函数中，我们调用 sum 函数，并使用 expect 断言，验证 Spy 是否被正确触发，并统计了 sum 函数被调用的次数和参数。最后，我们使用 mockRestore 方法，将 sum 函数恢复为原始状态，以便下一次测试。

除了对函数的调用情况进行监控外，Spy 还可以帮助我们模拟函数的返回值和抛出异常。下面是一个示例，演示了如何使用 Jest 中的 Spy API 模拟一个函数的返回值：

// javascriptcn.com 代码示例
function fetchData() {
  return axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.data)
    .catch(error => console.log(error));
}

test('fetchData should return mock data', () => {
  const spy = jest.spyOn(global, 'fetchData');
  spy.mockResolvedValue({
    userId: 1,
    id: 1,
    title: 'mock title',
    body: 'mock body'
  });

  return fetchData().then(data => {
    expect(data.title).toEqual('mock title');
    expect(data.body).toEqual('mock body');

    spy.mockRestore();
  });
});

上述代码中，我们首先定义了一个 fetchData 函数，它与前面的示例相同，使用 axios 库发送了一个 HTTP GET 请求，并返回了请求结果中的 data 字段。然后，我们使用 Jest 中的 spyOn 函数，对全局的 fetchData 函数进行了 Spy，并使用 mockResolvedValue 方法，让它返回我们预先定义好的模拟数据。在测试函数中，我们调用 fetchData 函数，并使用 expect 断言，验证返回的结果是否符合预期。最后，我们使用 mockRestore 方法，将 fetchData 函数恢复为原始状态。

总结

本文通过示例代码，详细介绍了 Jest 中 Mock 和 Spy 的使用方法和技巧。Mock 和 Spy 是 Jest 中非常重要的两个概念，它们可以帮助我们在测试过程中模拟函数和对象的行为，以及监控函数的调用情况。掌握 Mock 和 Spy 的使用方法，可以让我们编写更加高效和可靠的测试代码，提高前端开发的质量和效率。

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