如何在 JEST 中使用配置模拟 API 调用？

Posted 2023-02-22

【中文标题】如何在 JEST 中使用配置模拟 API 调用？

【英文标题】：How to mock an API call with configuration in JEST?

【发布时间】：2020-07-25 15:12:15

【问题描述】：

我正在为我的 api 使用 @woocommerce/woocommerce-rest-api 包。我正在使用 NextJS 和 React Redux。这是我的 woocommerce 配置：

import WooCommerceRestApi from '@woocommerce/woocommerce-rest-api';

export const wooApi = new WooCommerceRestApi(
   url: 'MY_API_URL',
   consumerKey: 'MY_CONSUMER_KEY',
   consumerSecret: 'MY_CONSUMER_SECRET',
   version: 'wc/v3',
   queryStringAuth: true,
);

当组件挂载时，我立即调度一个动作。

以下是我在操作中使用 API 的方式：

export const fetchMainProductCategories = () => 
    return async (dispatch: Dispatch) => 
       try 
          const response = await wooApi.get(`products/categories?hide_empty=true&parent=0`);
          dispatch<FetchMainProductCategories>(
             type: CategoryTypes.fetchMainProductCategories,
             payload: response.data,
        );

         catch (error) 
             console.log(error);
        
      ;
   ;

这是我到目前为止的初始测试语句，但我不工作：

import React from 'react';
import '../../__mocks__/matchMedia';
import MockCategories from '../../__mocks__/mockCategories';
import  render, cleanup, logDOM  from '@testing-library/react';
import Index from '../../pages/index';
import Root from '../../Root';
import  wooApi  from '../../config';

jest.mock('../../config');

describe('Homepage', () => 
   beforeEach(() => 
      render(
        <Root>
          <Index />
       </Root>
    );
 );

 afterEach(cleanup);

 it('loads Product Categories', async () => 
       wooApi.get.mockResolvedValueOnce(
          data: MockCategories,
       );
       logDOM();
    // const list = await waitFor(() => screen.getByTestId('category-list'));
    );
 );

【问题讨论】：

你有什么问题？测试 fetchMainProductCategories 时需要模拟 wooApi.get，并且需要在其他任何地方模拟 fetchMainProductCategories，这是单元测试的好策略。

【参考方案1】：

您需要将wooApi 的get 方法注册为模拟，同时保留api 的其他功能。即：

import  wooApi  from '../../config'
import  fetchMainProductCategories  from '../where-it-is-defined'

// mark get method as jest mock
jest.mock('../../config', () => (
   ...jest.requireActual('../../config'), // to avoid overriding other methods/features
   get: jest.fn(), // override get method of the api
))

describe('Homepage', () => 
   beforeEach(()=>
      wooApi.get.mockResolvedValue(
         status: 200,
         data:  categories: ['a', 'b'] ,
   )

   test('loads ...', async () => 
   const dispatch = jest.fn()

   await fetchMainProductCategories()(dispatch)

   expect(dispatch).toHaveBeenCalledWith(
       type: '...',
        payload:  categories: ['a', 'b'] 
      
    )
   )
)

参考： Bypassing Module Mocks in Jest

【讨论】：

谢谢！我试过了，我得到了 TypeError: _config.wooApi.get.mockResolvedValue is not a function - prnt.sc/rzioak

【参考方案2】：

已编辑：我的错，通过 jest.spyOn(config.wooApi, 'get') 我们只是在模拟单个实例的“get”方法。以下编辑的代码应该可以工作

您也可以使用jest.spyOn 仅模拟如下 get 方法

import * as config from '../../config'

jest.spyOn(WooCommerceRestApi.prototype, 'get')
WooCommerceRestApi.prototype.get.mockResolvedValue('...')

【讨论】：

是的，我也试过了，但仍然出现同样的错误。谢谢