Question

我有问题。

在我的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/'在这里我导入了商店，并在此文件中导入了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?

Answer 1

B4:B12这是正确的导入吗？

根据您提供的其余代码。导入不应该是：

import { ActionTypes } from 'actions/Profile'

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

1 个答案: