尝试在 React/Redux/Jest 中测试调度操作函数时获取未定义的 .then答案

【问题标题】：Getting .then of undefined when trying to test a dispatch action function in React/Redux/Jest尝试在 React/Redux/Jest 中测试调度操作函数时获取未定义的 .then
【发布时间】：2020-05-15 15:37:43
【问题描述】：

组件 › toggleNotification 操作 › 在成功 NOTIFICATION_ADD 后创建 NOTIFICATION_REMOVE（错误）

TypeError: 无法读取未定义的属性 'then'

在我的 changePassword 组件中

3个dispatch函数，重点测试toggleNotification。

const mapDispatchToProps = dispatch => ({
  verifyEmail: (...args) => { dispatch(verifyEmail(...args)); },
  toggleNotification: (flag, msg, type) => { dispatch(toggleNotification(flag, msg, type)); },
  displayError: (error, errMsg) => { dispatch(displayError(error, errMsg)); }
});

/actions 中的 toggleNotification 调度函数

export const toggleNotification = (notification, message, type) => (dispatch) => {
  if (notification === true) {
    dispatch({
      type: NOTIFICATION_ADD,
      payload: {
        message,
        type
      }
    });
    setTimeout(() => {
      dispatch({
        type: NOTIFICATION_REMOVE
      });
    }, 7000);
  }
};

最后是我的 changePassword.test.js

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

// Testing packages
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import expect from 'expect';

// Actions
import { verifyEmail, toggleNotification } from 'actions';

// Action Types
import { NOTIFICATION_ADD, NOTIFICATION_REMOVE } from 'actionTypes';

// String Constants
import { CHANGE_PASS_NOT_MATCH } from 'copy/Components/login';

// Component to test
import { ChangePasswordJest } from './changePassword';

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

describe('<ChangePassword /> component', () => {
  const wrapper = shallow(<ChangePasswordJest />);

  describe('when rendering', () => {
    it('should render', () => {
      const tree = toJson(wrapper);
      expect(tree).toMatchSnapshot();
      expect(wrapper).toHaveLength(1);
    });
  });

  describe('toggleNotification actions', () => {
    it('creates NOTIFICATION_REMOVE after successfull NOTIFICATION_ADD (error)', () => {
      const expectedActions = [
        {
          type: NOTIFICATION_ADD,
          payload: {
            notification: true,
            message: CHANGE_PASS_NOT_MATCH,
            type: 'error'
          }
        },
        { type: NOTIFICATION_REMOVE }
      ];

      const store = mockStore();

      console.log('store -->', store);
      console.log('toggleNotification -->', toggleNotification);

      return store.dispatch(toggleNotification(true, CHANGE_PASS_NOT_MATCH, 'error')).then(() => {
      // return of async actions
        expect(store.getActions()).toEqual(expectedActions);
      });
    });
  });
});

在终端中，我的控制台日志按预期打印出 store 和 toggleNotification：

我得到的任何想法或想法

TypeError: 无法读取未定义的属性 'then'

开启

return store.dispatch(toggleNotification(true, CHANGE_PASS_NOT_MATCH, 'error'))
  .then(() => {
     // return of async actions
     expect(store.getActions()).toEqual(expectedActions);
});

【问题讨论】：

这个应该可以帮到你：github.com/reactjs/redux/issues/1251
@JoeLissner 谢谢！这很有帮助，但实际上解决了我当前问题的问题，现在有一个新问题要发布。

标签： javascript reactjs unit-testing redux jestjs

【解决方案1】：

问题是我的 toggleNotifcations 函数实际上不是 Promise。

export const toggleNotification = (notification, message, type) => (dispatch) => {
  if (notification === true) {
    dispatch({
      type: NOTIFICATION_ADD,
      payload: {
        message,
        type
      }
    });

    setTimeout(() => {
      dispatch({
        type: NOTIFICATION_REMOVE
      });
    }, 7000);
  }
};

相反，我在测试中需要做的只是调用该调度函数：

describe('toggleNotification actions', () => {
  let store;

  beforeEach(() => {
    store = mockStore();
  });

  it('dispatches a NOTIFICATION_ADD (passwords don\'t match error)', () => {
    const expectedActions = [
      {
        type: NOTIFICATION_ADD,
        payload: {
          message: CHANGE_PASS_NOT_MATCH,
          type: 'error'
        }
      }
    ];

    store.dispatch(toggleNotification(true, CHANGE_PASS_NOT_MATCH, 'error'));

    console.log('store.getActions()', store.getActions());

    expect(store.getActions()).toEqual(expectedActions);
  });
});

现在的新问题是，即使我对该调度操作进行了通过测试。它对报道没有任何帮助！

将发布与此新问题相关的新问题：

【讨论】：