如何优雅地模拟多个封装式 GraphQL 请求？

javascript

2024-03-21 10:42:42

模拟多个封装式 GraphQL 请求的 Jest 测试解决方案

问题概述

在测试使用 axios 库封装的 GraphQL API 请求的 Redux sagas 时，面临着模拟多个请求的挑战。由于模拟被顺序执行，导致后续请求实际发送到后端，破坏了测试结果。

解决方案

问题的关键在于没有在每个测试用例后清除模拟。通过在 afterEach 函数中添加 jest.clearAllMocks()，可以确保在每个测试开始时清除模拟，从而防止意想不到的行为。

代码示例

以下是如何在测试中添加 afterEach 函数：

import { afterEach } from '@jest/globals';
import { sampleSaga } from './sampleSaga';
import { sampleOneApiRequest, sampleTwoApiRequest } from 'path/api';
import { successAction } from 'path/redux/action';
import { put } from 'redux-saga/effects';

jest.mock('path/api', () => ({
  sampleOneApiRequest: async () => { id: 'sample1' },
  sampleTwoApiRequest: async () => { id: 'sample2' }
}));

descripe('test sampleSaga', () => {
  
  if('test sampleSaga switch false', () => {
    const generator   = sampleSaga({ payload: { switch: false } });
    const apiResponse = { data: { id: 'sample1' } };
    
    expect(generator.next().value).toEqual(sampleOneApiRequest());
    expect(generator.next(apiResponse).value).toEqual(put(successAction(apiResponse)))
  });
  
  if('test sampleSaga switch true', () => {
    const generator   = sampleSaga({ payload: { switch: true } });
    const apiResponse = { data: { id: 'sample2' } };
    
    expect(generator.next().value).toEqual(sampleTwoApiRequest());
    expect(generator.next(apiResponse).value).toEqual(put(successAction(apiResponse)))
  });

  afterEach(() => {
    jest.clearAllMocks();
  });
});