嘗試在 React/Redux/Jest 中測試 dispatch action 函數時獲取 .then 的 undefined

Question

組件 › toggleNotification 操作 › 在成功 NOTIFICATION_ADD（錯誤）后創建 NOTIFICATION_REMOVE

類型錯誤：無法讀取未定義的屬性“then”

在我的 changePassword 組件中

3個調度函數，重點測試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 ：

任何想法或想法為什么我得到

類型錯誤：無法讀取未定義的屬性“then”

開

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

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

現在的新問題是，即使我對該調度操作進行了通過測試。 它對覆蓋沒有任何作用！

將發布與此新問題相關的新問題：