当我使用玩笑

时间:2019-12-19 20:11:54

标签: javascript unit-testing jestjs axios

我正在尝试模拟axios调用并验证响应,但是当我记录来自模拟axios调用的响应时,我得到undefined。有人有什么想法吗?

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);
   }
}

users.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的帖子。方法。看起来像这样:

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

1 个答案:

答案 0 :(得分:2)

这是不带<div class="topnav"> <nav> <ul> <li><a href="aboutblank.html">recepten</a></li> <li><a href="aboutblank.html">varianten</a></li> <li><a href="aboutblank.html">contact</a></li> <li><a href="aboutblank.html">over ons</a></li> <input type="text" style="right:0" placeholder="Search.."> </ul> </nav> </div> 文件夹的解决方案。仅使用__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);
  });
});

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