當我使用 jest 從模擬的 axios 調用返回一些響應時變得未定義

Question

我正在嘗試模擬 axios 調用並驗證響應，但是當我記錄來自模擬 axios 調用的響應時，我得到了undefined 。 任何人有任何想法為什么？

用戶.js

import axios from 'axios';

export default class MyClass{
   constructor(config){
      this.config = config;
   }

   async getUsers(url, params, successHandler, errorHandler) {
      return axios.post(url, params)
             .then(resp => this.handleAPIResponse.call(this, resp, successHandler, errorHandler))
             .catch(error => errorHandler);
   }
}

用戶.test.js

import MyClass from './mycode.js';
import axios from 'axios';

jest.mock('axios');

beforeEach(() => {
  myClass = new MyClass({ env: 'prod' });
});

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

const mockResponseData = jest.fn((success, payload) => {
  return {
    data: {
      result: {
        success,
        payload
      }
    }
  };
});

test('should return all the users', async () => {
   const successHandler = jest.fn();
   const errorHandler = jest.fn();
   const users = mockResponseData(true, ['John Doe', 'Charles']);

   axios.post.mockImplementationOnce(() => {
     return Promise.resolve(users);
   });

   const response = await myClass.getUsers('url', {}, successHandler, errorHandler);
   console.log(response);  // This logs undefined
   expect(successHandler).toHaveBeenCalledTimes(1);
});

另外，我只想澄清一下，我的 src 目錄下有一個mocks文件夾，其中有一個名為 axios.js 的文件，我在其中模擬了 axios 的 post 方法。 它看起來像這樣：

export default {
  post: jest.fn(() => Promise.resolve({ data: {} }))
};

Answer 1

這是沒有__mocks__文件夾的解決方案。 只使用jest.mock() 。

users.js

import axios from 'axios';

export default class MyClass {
  constructor(config) {
    this.config = config;
  }

  async getUsers(url, params, successHandler, errorHandler) {
    return axios
      .post(url, params)
      .then((resp) => this.handleAPIResponse.call(this, resp, successHandler, errorHandler))
      .catch((error) => errorHandler);
  }

  async handleAPIResponse(resp, successHandler, errorHandler) {
    successHandler();
    return resp;
  }
}

users.test.js :

import MyClass from './users';
import axios from 'axios';

jest.mock('axios', () => {
  return {
    post: jest.fn(() => Promise.resolve({ data: {} })),
  };
});

describe('59416347', () => {
  let myClass;
  beforeEach(() => {
    myClass = new MyClass({ env: 'prod' });
  });

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

  const mockResponseData = jest.fn((success, payload) => {
    return {
      data: {
        result: {
          success,
          payload,
        },
      },
    };
  });

  test('should return all the users', async () => {
    const successHandler = jest.fn();
    const errorHandler = jest.fn();
    const users = mockResponseData(true, ['John Doe', 'Charles']);

    axios.post.mockImplementationOnce(() => {
      return Promise.resolve(users);
    });

    const response = await myClass.getUsers('url', {}, successHandler, errorHandler);
    console.log(response);
    expect(response.data.result).toEqual({ success: true, payload: ['John Doe', 'Charles'] });
    expect(successHandler).toHaveBeenCalledTimes(1);
  });
});

帶有覆蓋率報告的單元測試結果：

 PASS  src/stackoverflow/59416347/users.test.js (9.166s)
  59416347
    ✓ should return all the users (18ms)

  console.log src/stackoverflow/59416347/users.test.js:41
    { data: { result: { success: true, payload: [Array] } } }

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |    90.91 |      100 |    83.33 |    90.91 |                   |
 users.js |    90.91 |      100 |    83.33 |    90.91 |                12 |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.518s

源代碼： https : //github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59416347