单元和集成测试

🔥 使用 Jest 和 Axios 启动单元和集成测试

测试是确保代码按预期工作并长期保持可靠性的重要部分。本指南使用 **Jest** 和 **Axios** 的示例解释了 **单元测试** 和 **集成测试**。读完本指南后,您将能够自信地编写自己的测试!🚀

🗂️ 目录

  • 测试简介
  • 单元测试
  • 使用 Axios 进行集成测试
  • 结论
  • 📚 测试简介

    测试涉及验证您的代码在各种条件下是否按预期运行。使用流行的测试库 **Jest**,您可以编写两种主要类型的测试:

  • 单元测试:单独测试各个功能或组件。
  • 集成测试:验证应用程序的不同部分如何协同工作。
  • 这些测试有助于尽早发现错误、减少回归问题并保持较高的代码质量。让我们从探索**单元测试**开始吧!🧪

    🧪 单元测试

    **单元测试** 专注于单独测试各个功能或组件。它确保代码的每个小单元都能按预期独立运行。

    示例:测试求和函数

    这是一个对两个数字求和的简单函数:

    // src/sum.js
    export const sum = (a, b) => a + b;

    编写单元测试

    创建测试文件`src/__tests__/sum.test.js`,写入以下内容:

    // src/__tests__/sum.test.js
    import { sum } from '../sum';
    
    describe('sum', () => {
      it('should add two numbers correctly', () => {
        expect(sum(1, 2)).toBe(3);
        expect(sum(-1, 1)).toBe(0);
      });
    });

    运行单元测试

    使用以下命令运行测试:

    npx jest src/__tests__/sum.test.js

    如果一切按预期进行,您将看到✅,确认测试通过。

    Integration Test Passing Screenshot

    🔗 使用 Axios 进行集成测试

    **集成测试**可确保应用程序的不同部分能够很好地协同工作。让我们测试一个使用**Axios**从 API 获取用户数据的函数。

    示例:获取用户数据

    假设我们有一个从 API 检索用户数据的函数:

    // src/apiService.js
    import axios from 'axios';
    
    export const fetchUserData = async (userId) => {
      const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);
      return response.data;
    };

    编写集成测试

    为了测试此功能,请创建一个文件“src/__tests__/apiService.test.js”。我们将模拟 Axios 以防止真实的 API 调用。

    // src/__tests__/apiService.test.js
    import axios from 'axios';
    import { fetchUserData } from '../apiService';
    
    jest.mock('axios'); // Mocking Axios globally for tests
    
    describe('fetchUserData', () => {
      it('should fetch user data successfully', async () => {
        const mockUserData = { id: 1, name: 'Alice' };
        axios.get.mockResolvedValue({ data: mockUserData });
    
        const userData = await fetchUserData(1);
    
        expect(userData).toEqual(mockUserData);
        expect(axios.get).toHaveBeenCalledWith('https://jsonplaceholder.typicode.com/users/1');
      });
    
      it('should throw an error if fetching fails', async () => {
        axios.get.mockRejectedValue(new Error('Fetch failed'));
    
        await expect(fetchUserData(1)).rejects.toThrow('Fetch failed');
      });
    });

    要点:

  • jest.mock('axios'):模拟整个 Axios 库。
  • mockResolvedValue:模拟成功的 API 响应。
  • mockRejectedValue:模拟 API 失败。
  • 运行集成测试

    使用以下命令运行测试:

    npx jest src/__tests__/apiService.test.js

    如果成功,Jest 将确认成功和失败场景的测试均已通过。✅

    🎉 结论

    单元测试和集成测试是构建可靠且可维护的应用程序的必备工具。通过使用 **Jest** 和 **Axios**,您可以:

  • 使用单元测试验证各个功能。
  • 使用集成测试验证模块之间的交互。
  • 单元测试和集成测试是确保您的代码单独和集体运行良好的强大方法。立即开始向您的代码库添加测试,并享受知道您的应用程序经过良好测试所带来的安心。祝您编码和测试愉快!🧑‍💻✨