用 Jest 模拟 redux saga 中间件

Question

我有这个 configureStore.js，它配置了我的增强型 redux 存储并将其持久化到 localStorage：

// @flow

import 'babel-polyfill'

import { addFormSubmitSagaTo } from 'redux-form-submit-saga/es/immutable'
import { applyMiddleware, createStore, compose } from 'redux'
import { autoRehydrate, persistStore } from 'redux-persist-immutable'
import { browserHistory } from 'react-router'
import { combineReducers } from 'redux-immutable'
import { fromJS } from 'immutable'
import { routerMiddleware } from 'react-router-redux'
import createSagaMiddleware from 'redux-saga'

import rootReducer from './reducers'
import sagas from './sagas'

export default function configureStore () {
  const initialState = fromJS({ initial: { dummy: true } })
  const sagaMiddleware = createSagaMiddleware()
  const middleware = [ routerMiddleware(browserHistory), sagaMiddleware ]

  const enhancer = compose(
    autoRehydrate(),
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__()
  )
  const store = createStore(
    combineReducers(rootReducer),
    initialState,
    enhancer
  )
  // Persist store to the local storage
  persistStore(store, { blacklist: [ 'form', 'routing' ] })
  // Decorate with Redux Form Submit Saga
  // and create hook for saga's
  const rootSaga = addFormSubmitSagaTo(sagas)
  sagaMiddleware.run(rootSaga)

  return store
}

现在我正在尝试使用 Jest 测试这个文件：

import configureStore from './../configureStore'

import * as reduxPersistImmutable from 'redux-persist-immutable'
import * as redux from 'redux'
import createSagaMiddleware from 'redux-saga'

describe('configureStore', () => {
  it('persists the store to the localStorage', () => {
    reduxPersistImmutable.persistStore = jest.fn()
    redux.createStore = jest.fn()
    createSagaMiddleware.default = jest.fn(() => {
      run: () => jest.fn()
    })

    configureStore()
  })
})

在此测试中一切顺利，直到 configureStore 到达sagaMiddleware.run(rootSaga) 行。它抛出以下错误：

    FAIL  app/__tests__/configureStore.js
 ● Console

   console.error ../node_modules/redux-saga/lib/internal/utils.js:206
     uncaught at check Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware

 ● configureStore › persists the store to the localStorage

   Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware

     at check (../node_modules/redux-saga/lib/internal/utils.js:50:11)
     at Function.sagaMiddleware.run (../node_modules/redux-saga/lib/internal/middleware.js:87:22)
     at configureStore (app/configureStore.js:38:18)
     at Object.<anonymous> (app/__tests__/configureStore.js:17:60)
     at process._tickCallback (../internal/process/next_tick.js:103:7)

这个错误表明 mock 函数没有按我的预期工作：它似乎没有被覆盖，而是从 redux-saga 中调用的。模拟 redux.createStore 工作得很好。

Answer 1

显然，使用jest.mock('redux-saga', () => () => ({ run: jest.fn() })) 是模拟redux-saga 的createSagaMiddleware 函数的正确方法。