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

zbwhf8kr  于 2022-11-12  发布在  React
关注(0)|答案(2)|浏览(177)

我有一些问题。
在我的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/'在这里我导入存储,并在此文件导入减速器.

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?
bqf10yzr

bqf10yzr1#

import { ActionTypes } from 'actions/Profile'这是正确的导入吗?
基于您提供的其余代码。导入不应该是:
import { ActionTypes } from './Profile';

qeeaahzv

qeeaahzv2#

同样的问题,根据我的经验,拆分代码是最好的选择。正如你所说的,你遇到了一个导入错误,当一些文件有异步代码时产生了一个循环依赖,所以在switch求值的时候{ types }对象是空的。我通过将{ types }移动到一个独立的文件来解决这个问题。

相关问题