用Jest模拟redux saga中间件

Dan*_*ani 4 unit-testing jestjs redux-saga

我有这个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
}
Run Code Online (Sandbox Code Playgroud)

现在,我正在尝试使用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()
  })
})
Run Code Online (Sandbox Code Playgroud)

在此测试中,一切都会顺利进行,直到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)
Run Code Online (Sandbox Code Playgroud)

该错误表明模拟功能无法按我的预期工作:它似乎没有被覆盖,而是在redux-saga中调用的。模拟redux.createStore可以正常工作。

Dan*_*ani 5

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

  • 如果您不想对其进行测试,则无需使它成为间谍,因此它也应该可以工作:`jest.mock('redux-saga',()=&gt;()=&gt;({run :jest.fn()})) (2认同)