react jest unit test case TypeError: Cannot read property 'then' of undefined

Question

我已经使用 react、redux-mock-store 和 redux 编写了测试用例，但我不断出错。我在 Whosebug 上检查了同样的错误，但我无法理解我的情况。

Cannot read property '.then' of undefined when testing async action creators with redux and react

这是我的 index.js 文件：

import { post } from '../../../service/index';
import { CREATE_JD_SUCCESS, CREATE_JD_FAILED, CREATE_JD_URL, REQUEST_INITIATED, REQUEST_SUCCESSED } from '../../../constants/AppConstants'

export function createJob(jd) {
  return (dispatch) => {
    dispatch({
      type: REQUEST_INITIATED
    });
    post(CREATE_JD_URL, jd)
      .then((response) => {
        if (response.status === 200) {
          dispatch({
            type: REQUEST_SUCCESSED,
          });
          dispatch({
            type: CREATE_JD_SUCCESS,
            data: response.payload,
          })
        }
        else {
          dispatch({
            type: REQUEST_SUCCESSED
          });
          dispatch({
            type: CREATE_JD_FAILED,
            data: response.status,
          });
        }
      })
  }
}

这是我的 index.test.js 文件

import * as actions from '../index';
import configureMockStore from 'redux-mock-store';
import moxios from 'moxios';
import thunk from 'redux-thunk';
import apiGatewayEndpoint from '../../../../config/index';
import { CREATE_JD_SUCCESS, CREATE_JD_URL } from '../../../../constants/AppConstants';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

const newJd = {
  "companyId": "12345",
  "jobDescription": 'Hello there'
};

const responseData = "job created!";

describe('actions for creating new job', () => {

  beforeEach(function () {
    moxios.install();
  });

  afterEach(function () {
    moxios.uninstall();
  });

  it('action for create job', async (done) => {
    let url = CREATE_JD_URL;
    moxios.stubRequest(apiGatewayEndpoint.apiGatewayEndpoint + url, {
      status: 200,
      response: responseData
    });
    const expectedActions = [{ "type": "REQUEST_INITIATED" }, { "type": "REQUEST_SUCCESSED" }, { data: responseData, type: "CREATE_JD_SUCCESS" }];
    const store = mockStore({});
    await store.dispatch(actions.createJob(newJd))
      .then(() => {
        expect(store.getActions()).toEqual(expectedActions);
      });
    done();
  });
});

在上面的 link 回答中他说错误是因为 store.dispatch() 方法返回 undefined.bt 在我的例子中我的其他动作测试用例是运行很好，这和我上面写的一样不知道为什么会出现这个错误。

运行 npm 测试时出现控制台错误：

● actions for creating new jd › action for create jd

    TypeError: Cannot read property 'then' of undefined

      38 |     const expectedActions = [{ "type": "REQUEST_INITIATED" }, { "type": "REQUEST_SUCCESSED" }, { data: responseData, type: "CREATE_JD_SUCCESS" }];
      39 |     const store = mockStore({});
    > 40 |     await store.dispatch(actions.createJob(newJd))
         |           ^
      41 |       .then(() => {
      42 |         expect(store.getActions()).toEqual(expectedActions);
      43 |       });

如果有人知道请指导我我做错了什么here.any帮助将不胜感激

Answer 1

只需在 index.js 文件中调用 post 之前写上 return。例如：

return post(CREATE_JD_URL, jd)
      .then((response) => {
   ...

这对我有用。

react jest unit test case TypeError: Cannot read property 'then' of undefined

react jest unit test case TypeError: Cannot read property 'then' of undefined

unit-testing

reactjs

jestjs

redux-thunk

enzyme