如何使用 Jest 模拟 redux 操作答案

【问题标题】：How to mock redux actions with Jest如何使用 Jest 模拟 redux 操作
【发布时间】：2017-09-05 16:29:01
【问题描述】：

我有一个 React.Component，它使用 redux 操作 this.props.setFacebookToken(accessToken) 来设置变量。您将如何测试这种行为？

这是我的组件：

export default class FacebookButtonConnect extends Component {
  constructor(props) {
    ...
  }

  async _onFacebookButtonPress() {
    try {
      ... // fetching credentials from Facebook
      this.props.setFacebookToken(accessToken);
    } catch (err) {
       throw err;
    }
  }
}

我正在使用 Jest 进行单元测试。

【问题讨论】：

标签： javascript reactjs unit-testing redux jestjs

【解决方案1】：

考虑以下来自 Cory House 的笑话测试，包含在 react-slingshot 中，它测试了 redux action：

import * as ActionTypes from '../constants/actionTypes';
import * as ActionCreators from './fuelSavingsActions';

import MockDate from 'mockdate';

import {getFormattedDateTime} from '../utils/dateHelper';

describe('Actions', () => {
  let dateModified;
  beforeAll(() => {
    MockDate.set(new Date());
    dateModified = getFormattedDateTime();
  });
  afterAll(() => MockDate.reset());

  const appState = {
    newMpg: 20,
    tradeMpg: 10,
    newPpg: 1.50,
    tradePpg: 1.50,
    milesDriven: 100,
    milesDrivenTimeframe: 'week',
    displayResults: false,
    dateModified: null,
    necessaryDataIsProvidedToCalculateSavings: false,
    savings: {
      monthly: 0,
      annual: 0,
      threeYear: 0
    }
  };

  it('should create an action to save fuel savings', () => {
    const dispatch = jest.fn();
    const expected = {
      type: ActionTypes.SAVE_FUEL_SAVINGS,
      dateModified,
      settings: appState
    };

    // we expect this to return a function since it is a thunk
    expect(typeof (ActionCreators.saveFuelSavings(appState))).toEqual('function');
    // then we simulate calling it with dispatch as the store would do
    ActionCreators.saveFuelSavings(appState)(dispatch);
    // finally assert that the dispatch was called with our expected action
    expect(dispatch).toBeCalledWith(expected);
  });

  it('should create an action to calculate fuel savings', () => {
    const fieldName = 'newMpg';
    const value = 100;
    const actual = ActionCreators.calculateFuelSavings(appState, fieldName, value);
    const expected = {
      type: ActionTypes.CALCULATE_FUEL_SAVINGS,
      dateModified,
      settings: appState,
      fieldName,
      value
    };

    expect(actual).toEqual(expected); // Notice use of deep because it's a nested object
    // expect(actual).to.equal(expected); // Fails. Not deeply equal
  });
});

您的代码的一个不同之处在于您正在测试异步方法，因此还要考虑this jest async test example。

【讨论】：