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. And moduleNameMapper` is setup correctly. Any one can help me with this promlem?


reactjs redux apollo

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

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.

What is the Redux Saga Effect?

Effects are the kind of utility that’s provided by the redux-saga package. when u invokes effects it returns object contains instructions which redux-saga interprets.

Redux Tutorial - Learn Redux from Scratch

Redux Tutorial - Learn Redux from Scratch - You'll learn: What is Redux? What is Functional Programming? Higher-order Functions; Functional Composition; Redux Architecture... Redux - A Predictable State Container for JS Apps. Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark.

React Boilerplates with Redux, Redux Saga and Best Practices

React Boilerplates with Redux, Redux Saga and Best Practices