如何用Jest模拟redux动作

Question

我有一个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; 
    } 
    } 
} 

我用玩笑的单元测试。

Answer 1

考虑从科里府以下玩笑测试，如包含在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。