将商店导入文件时所有测试文件中出现意外错误

Question

我正在使用 Jest 和 Enzyme 来测试我的 React 应用程序。一切正常，但是当我在实用程序文件中导入 redux store 时，几乎所有测试都失败了。出现此错误：

 FAIL  app/containers/Login/LoginContainer.test.js
  ● Test suite failed to run

    TypeError: (0 , _redux.combineReducers) is not a function

      at Object.<anonymous> (app/index.jsx:31:2022)
      at Object.<anonymous> (app/utils/httpStatusParser.js:3:40)
      at Object.<anonymous> (app/utils/requestHandler.js:135:369)
      at Object.<anonymous> (app/redux/modules/user.js:148:54)
      at Object.<anonymous> (app/containers/Login/LoginContainer.test.js:5:13)
      at next (native)
      at next (native)

这里有一些代码：

app/index.jsx:

import React           from 'react'
import ReactDOM        from 'react-dom'
import { Provider }    from 'react-redux'
import thunk           from 'redux-thunk'
import createHistory   from 'history/createBrowserHistory'
import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux'

import routes          from '$CONFIG/routes'
import { authUser }    from '$REDUX/modules/user'
import { getCookie }   from '$UTILS/cookies'
import * as reducers   from '$REDUX'


const history = createHistory()
const routeMW = routerMiddleware(history)

export const store   = createStore(
  combineReducers({
    ...reducers,
    router : routerReducer
  }),
  compose(applyMiddleware(routeMW, thunk),
    window.devToolsExtension ? window.devToolsExtension() : (func) => func)
)

// ...rendering provider to DOM

app/utils/httpStatusParser:

import { push } from 'react-router-redux'

import { store } from '$APP/index.jsx'
import { unauthUser } from '$REDUX/modules/user'


.
.

import { store } from '$APP/index.jsx'
import { unauthUser } from '$REDUX/modules/user'
.
.
.

store.dispatch(unauthUser) // this is when http status is 4XX

requestHandler.js：

import envURLS             from '$CONFIG/envURLS'
import httpStatusParser,
{ errorTypeDetailMap }     from './httpStatusParser'
import { getCookie }       from './cookies'

...
export get() // uses httpStatusParser
export post() // uses httpStatusParser

user.js(减速器)

import { post } from '$UTILS/requestHandler'
import { errorTypeDetailMap } from '$UTILS/httpStatusParser'
import { setCookie } from '$UTILS/cookies'

...
export unauthUser() // Action Creator
...

这是测试文件代码之一：

import React from 'react'
import renderer from 'react-test-renderer'
import { mount } from 'enzyme'

import * as userActionCreators from '$REDUX/modules/user'
import { LoginContainer, mapStateToProps } from './LoginContainer'

// Snapshot matching for Login Container
describe('>>> Login Container -- Snapshot Test', () => {
  const initialState = userActionCreators.initialState

  it('Matches the snapshot with isFetching false', () => {
    const tree = renderer.create(<LoginContainer {...initialState} />).toJSON()

    expect(tree).toMatchSnapshot()
  })

  it('Matches the snapshot when log in button is clicked', () => {
    const updatedState = {
      ...initialState,
      isFetching : true
    }

    const tree = renderer.create(<LoginContainer {...updatedState} />).toJSON()

    expect(tree).toMatchSnapshot()
  })
})
// *************************************************************

登录容器：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { Login } from '$COMPONENTS'
import { getCookie }   from '$UTILS/cookies'
import * as userActionCreators from '$REDUX/modules/user'

流程是：

• 容器从 reducer 调用 Async Action Creator
• Async Action 创建者发出 get/post 调用，由 requestHandler.js 公开
• requestHandler 导入httpStatusParser 来解析状态。如果请求状态为 4XX，用户应该被重定向到/login。
• httpStatusParser 从index.jsx 导入store 以调度unauthUser 操作。

我不知道如何解决这个问题。如果您还需要什么，请告诉我。

Answer 1

您如何导入combineReducers 函数。应该是

import { combineReducers } from 'redux'