Question

我有一个小redux中间件，如此

import { hashHistory } from 'react-router'
import { REDIRECT_TO_LOGIN_REDIRECT_URL } from '../actions/login-redirect';

export default store => next => action => {

    if (action.type === REDIRECT_TO_LOGIN_REDIRECT_URL) {
        hashHistory.push(store.getState().loginRedirectUrl);
    }

    return next(action)
}

我想现在测试一下。正如您在第1行中所看到的，我正在导入hashHistory并稍后使用它。我想测试一下（对hashHistory的调用）。要做到这一点，我必须模仿hashHistory，但我不知道如何。我正在使用jest：

import { REDIRECT_TO_LOGIN_REDIRECT_URL } from '../actions/login-redirect';
import redirectMiddleware from './redirect-after-login';

describe('redirect after login middleware', () => {

    function setup() {
        const store = {
            subscribe: () => {},
            dispatch: () => {},
            getState: () => ({})
        };
        const next = jest.fn();
        const action = { type: REDIRECT_TO_LOGIN_REDIRECT_URL };
        return { store, next, action };
    }

    it('should push the redirect URL to the hashHistory', () => {
        // How to test it?
    })

});

Answer 1

您可以像这样模拟react-router模块：

import { hashHistory } from 'react-router'
import { REDIRECT_TO_LOGIN_REDIRECT_URL } from '../actions/login-redirect';
import redirectMiddleware from './redirect-after-login';

jest.mock('react-router', () => ({hashHistory: { push: jest.fn()}))

describe('redirect after login middleware', () => {

    function setup() {
        const store = {
            subscribe: () => {},
            dispatch: () => {},
            getState: () => ({loginRedirectUrl: 'someLoginRedirectUrl'})
        };
        const next = jest.fn();
        const action = { type: REDIRECT_TO_LOGIN_REDIRECT_URL };
        return { store, next, action };
    }

    it('should push the redirect URL to the hashHistory', () => {
        const { store, next, action } = setup()
        redirectMiddleware(store)(next)(action)
        expect(hashHistory.push).toHaveBeenCalledWith('someLoginRedirectUrl')
    })

});

如何使用jest

1 个答案: