在 React-Redux 应用程序中使用 JEST 进行测试时导入问题

Posted 2023-03-10

【中文标题】在 React-Redux 应用程序中使用 JEST 进行测试时导入问题

【英文标题】：Problems with import on testing with JEST in React-Redux app

【发布时间】：2019-06-12 13:01:58

【问题描述】：

我有一些问题。

在我的 React-Redux 中，我尝试使用操作函数测试一些文件。 其中一个功能是异步

这是这个文件的代码

import client from 'apollo/'
import  ME  from 'apollo/queries'

export const ActionTypes = 
  REQUEST_PROFILE: '@@profile/REQUEST_PROFILE',
  REQUEST_PROFILE_CANCELED: '@@profile/REQUEST_PROFILE_CANCELED',
  ERROR_REQUEST_PROFILE: '@@profile/ERROR_REQUEST_PROFILE',
 

export const requestProfile = () => (dispatch) => 
  dispatch( type: ActionTypes.REQUEST_PROFILE )
  client.query(
    query: ME,
    fetchPolicy: 'network-only'
  ).then(resp => 
    const profile = resp.data.me
    dispatch(setUser(profile))
  ).catch(err => 
    console.log(...err)
    dispatch( type: ActionTypes.ERROR_REQUEST_PROFILE, err )
  )

import client from 'apollo/' 是一个 Apollo 客户端实例

这个文件的代码也很简单

import ApolloClient from 'apollo-client'
import  setContext  from 'apollo-link-context'
import  createHttpLink  from 'apollo-link-http'
import  InMemoryCache  from 'apollo-cache-inmemory'
import  onError  from 'apollo-link-error'
import  from  from 'apollo-link'
import  store from '../redux/'
import  setErrorStatus  from 'actions/Base'
import  logOut, getToken  from 'helpers/localStorage'

const errorCodes = onError(( networkError ) => 
  if (!networkError) 
    return false
  
  let status = networkError.statusCode
  if (status === 400) 
    return false
   if (status === 401) 
    logOut()
    return false
  
  store.dispatch(setErrorStatus(status))
)

const cache = new InMemoryCache()
const authLink = setContext((_,  headers ) => 
  const token = getToken()
  return 
    headers: 
      ...headers,
      authorization: token ? `JWT $token` : "",
    
  
)

const httpLink = createHttpLink(
  uri: `https://api.url.com/`,
)

export default new ApolloClient(
  link: from([errorCodes, authLink, httpLink]),
  cache
)

import store from '../redux/'这里我导入了store，在这个文件中导入了reducer。

import  combineReducers  from 'redux'
import Profile from './Profile'


export default combineReducers(
    Profile
)

import Profile from './Profile'

import  ActionTypes  from 'actions/Profile'


export default (state = initialState, action) => 
  switch (action.type) 
    case ActionTypes.REQUEST_PROFILE:
    default:
      return state
  

项目工作，启动项目没有问题。在生产环境和浏览器中也没有错误。

但是当我尝试测试我的actions/Profile.js 时，出现了一些奇怪的错误。

这是测试代码

import 
  requestProfile, ActionTypes
 from './Profile'

describe('Profile actions', () => 
  it('requestProfile', () => 

  )
)

还有错误

  ● Test suite failed to run

    TypeError: Cannot read property 'REQUEST_PROFILE' of undefined

      16 | export default (state = initialState, action) => 
      17 |   switch (action.type) 
    > 18 |     case ActionTypes.REQUEST_PROFILE:
         |                               ^
      19 |       return state

      at Object.<anonymous>.exports.default (src/redux/reducers/Profile.js:18:31)
      at node_modules/redux/lib/combineReducers.js:53:24
          at Array.forEach (<anonymous>)
      at assertReducerShape (node_modules/redux/lib/combineReducers.js:51:25)
      at combineReducers (node_modules/redux/lib/combineReducers.js:107:5)
      at Object.<anonymous> (src/redux/reducers/index.js:12:45)
      at Object.<anonymous> (src/redux/index.js:1:163)
      at Object.<anonymous> (src/apollo-client/index.js:7:14)
      at Object.<anonymous> (src/redux/actions/Profile.js:1:174)
      at Object.<anonymous> (src/redux/actions/Profile.test.js:1:56)```

I cannot understand the core of this error. I am sure, that ActionType is here and it`s value not undefined. And `moduleNameMapper` is setup correctly. Any one can help me with this promlem? 

【问题讨论】：

问题出在导入文件上，我测试了我已经测试actions/Profile 并且在嵌套导入中这个文件也被导入了 那是抛出错误

【参考方案1】：

import ActionTypes from 'actions/Profile'这是正确的导入吗？

基于您提供的其余代码。不应该导入：

import ActionTypes from './Profile';