用Jest进行单元测试Redux异步功能 [英] Unit Testing redux async function with Jest

问题描述

我对单元测试还很陌生，所以请原谅.

I'm pretty new to unit testing so please pardon any noobness.

我有一个文件api.js，其中包含该应用程序的所有API调用功能.每个函数都返回其诺言.外观如下:

I have a file api.js which has all the API call functions for the app. Each function returns its promise. Here's how it looks:

api.js

api.js

const api = {
  getData() {
    return superagent
      .get(apiUrl)
      .query({
        page: 1,
      });
  },
}

现在进入我要测试的redux异步操作.看起来像这样:

Now coming to the redux async action that i'm trying to test. It looks something like this:

getDataAction.js

getDataAction.js

export function getData(){
    return dispatch => {
        api.getData()
            .end((err, data) => {
              if (err === null && data !== undefined) {
                console.log(data);
              } else if (typeof err.status !== 'undefined') {
                throw new Error(`${err.status} Server response failed.`);
              }
            });
    }
}

现在，在我的测试文件中，我已经尝试过:

Now, In my test file, I've tried this:

getDataAction.test.js

getDataAction.test.js

jest.mock('api.js');
describe('getData Action', () => {
  it('gets the data', () => {
    expect(store.dispatch(getData())).toEqual(expectedAction);
  });
});

这，给我抛出一个错误:

This, throws me an error:

TypeError: Cannot read property 'end' of undefined

我在做什么错?现在，我可以使用Jest的默认自动模拟程序来模拟api.js，但是如何处理使用end运行回调函数的情况?非常感谢您的帮助！

What am I doing wrong ? Now i'm able to mock api.js with default automocker of Jest, but how do I handle the case of running callback function with end ? Thanks a lot for any help !

推荐答案

您的api模拟必须返回一个函数，该函数返回具有end函数的对象:

Your mock of api needs to return a function that returns an object that has the end function:

import api from 'api' //to set the implantation of getData we need to import the api into the test

// this will turn your api into an object with the getData function
// initial this is just a dumb spy but you can overwrite its behaviour in the test later on 
jest.mock('api.js', ()=> ({getData: jest.fn()}));

describe('getData Action', () => {
  it('gets the data', () => {
    const result = {test: 1234}
    // for the success case you mock getData so that it returns the end function that calls the callback without an error and some data
    api.getData.mockImplementation(() => ({end: cb => cb(null, result)}))
    expect(store.dispatch(getData())).toEqual(expectedAction);
  });

 it('it thows on error', () => {

    // for the error case you mock getData so that it returns the end function that calls the callback with an error and no data
    api.getData.mockImplementation(() => ({end: cb => cb({status: 'someError'}, null)}))
    expect(store.dispatch(getData())).toThrow();
  });
});

这篇关于用Jest进行单元测试Redux异步功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！