用 Jest 测试像 AngularJS 中的 $http 的服务-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，我们经常使用像 AngularJS 中的 $http 服务来进行网络请求。这些服务的测试是极其重要的，因为这可以确保我们的程序在面对各种情况时能够正常运行，同时也可以帮助我们发现潜在的问题。

Jest 是一个强大的 JavaScript 测试框架，它能够帮助我们轻松地编写测试用例。在本文中，我们将学习如何使用 Jest 来测试像 AngularJS 中的 $http 服务。

安装 Jest

要使用 Jest 进行测试，我们需要先将其安装到项目中。我们可以使用 npm 来完成这个过程：

npm install --save-dev jest

我们还需要在 package.json 文件中添加以下内容：

"scripts": {
  "test": "jest"
}

这将允许我们使用 npm test 命令来运行 Jest 测试。

编写测试用例

现在我们已经准备好开始编写测试用例了。我们将使用以下示例代码作为我们的测试对象：

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

const getUserData = (userId) => {
  return axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`)
    .then(response => response.data)
    .catch(error => {
      console.error(error);
      return {};
    });
};

export default getUserData;

这个函数将调用 axios 库来获取与给定 userId 相对应的用户信息，并在发生错误时打印错误信息并返回一个空对象。

以下是我们的测试用例：

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

jest.mock('axios');

describe('getUserData', () => {
  it('should return user data when the request is successful', async () => {
    const mockResponse = { data: { name: 'John Smith' } };
    axios.get.mockResolvedValue(mockResponse);

    const userData = await getUserData(1);

    expect(axios.get).toHaveBeenCalledWith('https://jsonplaceholder.typicode.com/users/1');
    expect(userData).toEqual(mockResponse.data);
  });

  it('should handle errors when the request fails', async () => {
    const mockError = new Error('Oops!');
    axios.get.mockRejectedValue(mockError);

    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
    const userData = await getUserData(1);
    consoleSpy.mockRestore();

    expect(axios.get).toHaveBeenCalledWith('https://jsonplaceholder.typicode.com/users/1');
    expect(console.error).toHaveBeenCalledWith(mockError);
    expect(userData).toEqual({});
  });
});

我们使用 jest.mock 模拟了 axios 模块，然后定义了两个测试用例，以测试函数在成功及失败情况下的行为。

在第一个测试用例中，我们模拟了一个成功的请求，并检查函数是否调用了正确的 URL。我们还使用 expect 函数来验证返回的数据是否与我们预期的一致。

在第二个测试用例中，我们模拟了一个失败的请求，并使用 spyOn 函数捕获了 console.error 方法。我们检查了错误是否被正确打印，并验证函数是否返回了一个空对象。

总结

在本文中，我们学习了如何使用 Jest 对类似 AngularJS 中的 $http 服务进行测试。Jest 提供了一个简单、快速且易于使用的测试框架，可以帮助我们编写高质量的测试用例来确保我们的代码能够应对各种情况。希望这篇文章对你有所指导，在你的测试旅程中带来帮助。

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