Problems with import on testing with JEST in React-Redux app

Problems with import on testing with JEST in React-Redux app

I have some problem.

I have some problem.

In my React-Redux I try to test some file with action functions. One of the function is async

Here is code of this file

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/' is an Apollo-client instance

Code of this file is simple too

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/' here I imported store, and at this file imported 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 } }

Project working, on starting project no problems. In production env and in browser no errors too.

But when I try to test my actions/Profile.js there some strange error.

Here is code of test

import {
  requestProfile, ActionTypes
} from './Profile'

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

}) })

And the error

  ‚óŹ 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 its value not undefined. AndmoduleNameMapper` is setup correctly. Any one can help me with this promlem?


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

An intro to Redux and how state is updated in a Redux application

I started learning Redux a few days back and it was an overwhelming concept for me at the start. After polishing my skills in ReactJS by making a&nbsp;<a href="https://github.com/aimenbatool/my-reads" target="_blank">personal book reading application</a>, I headed towards Redux to learn more about it.

React Boilerplates with Redux, Redux Saga and Best Practices

React Boilerplates with Redux, Redux Saga and Best Practices