如何在 ReactJS/Typescript 應用程序中使用 Jest 測試類中的公共異步函數

Question

類型 typeof PayoutApi 上不存在屬性“getUsersTotalPayout”

我的課：

import { bind } from 'decko';

import BaseApi from './Base';
import * as NS from './types';

class PayoutApi extends BaseApi {

  @bind
  public async getUsersTotalPayout(userId: string): Promise<number> {
    const params: NS.IGetUsersTotalPayoutRequest = { userId };
    const response = await this.actions.get<{ payout: number }>(
      '/api/get-total-payout',
      params,
    );
    return response.data.payout;
  }
}

export default PayoutApi;

測試文件：

import PayoutApi from './LiquidityPool';

const endpoint = '/api/get-total-payout';

const userId = 'foo';

jest.mock(endpoint, () => ({
  getUsersTotalPayout: jest.fn(() => Promise.resolve({ data: { payout: 100.21 } }))
}));

describe('API: getUsersTotalPayout', () => {
  it('should make a request when we get images', () => {
    // const testApi = new PayoutApi();
    expect(PayoutApi.getUsersTotalPayout(userId)).toHaveBeenCalledWith(endpoint, 'GET');
  });
});

在expect(PayoutApi.getUsersTotalPayout).toHaveBeenCalledWith(endpoint, 'GET');上得到那個錯誤

Answer 1

1. 您當前正在嘗試調用該類的方法。 由於它不是static您應該首先實例化類的對象。

    let api = new PayoutApi(); expect(api.getUsersTotalPayout(userId).....)

2. 由於jest.mock模塊不是端點或 XHR 請求，您的測試將嘗試將實時請求發送到 /api/get-total-payout。 為了處理它，需要知道您使用什么 XHR 包裝器。 說fetch()有很好的包裝模擬程序，像 axios 這樣的庫也有它們的等價物。

3. 至於測試本身。 如果你調用一個方法並expect它的結果，它就不起作用。 它應該運行必須調用服務器的方法，然后檢查模擬 XHR 是否已使用有效參數調用：

    api.getUsersTotalPayout(userId); expect(fetch_or_other_wrapper_for_mocking_xhr.get_last_request_method()).toEqual('get', endpoint, userId)