我有一些问题。
在我的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?
2条答案
按热度按时间bqf10yzr1#
import { ActionTypes } from 'actions/Profile'
这是正确的导入吗?基于您提供的其余代码。导入不应该是:
import { ActionTypes } from './Profile';
个qeeaahzv2#
同样的问题,根据我的经验,拆分代码是最好的选择。正如你所说的,你遇到了一个导入错误,当一些文件有异步代码时产生了一个循环依赖,所以在switch求值的时候
{ types }
对象是空的。我通过将{ types }
移动到一个独立的文件来解决这个问题。