Error testing reducer initial state

Question

I'm receiving an error when trying to do a basic reducer test such as those found on the redux docs: https://redux.js.org/recipes/writing-tests#reducers

TypeError: Cannot read property 'GROUP_LIST_REQUEST' of undefined

  22 | 
  23 |   switch (action.type) {
> 24 |     case GROUP_LIST_REQUEST:
  25 |       return {
  26 |         ...state,
  27 |         fetching: true,

  at group (app/reducers/group.js:24:10)
  at node_modules/redux/lib/combineReducers.js:53:24
  at Array.forEach (native)
  at assertReducerShape (node_modules/redux/lib/combineReducers.js:51:25)
  at combineReducers (node_modules/redux/lib/combineReducers.js:107:5)
  at Object.<anonymous> (app/reducers/all.js:23:16)
  at Object.<anonymous> (app/store.js:31:1)
  at Object.<anonymous> (app/models/api.js:31:1)
  at Object.<anonymous> (app/actions/group.js:1:1)
  at Object.<anonymous> (app/reducers/group.js:1:1)
  at Object.<anonymous> (__tests__/groups/reducer.js:6:1)

The stack trace seems to imply that the whole app is being run, when I just want to run my reducer method in isolation.

But even weirder is that it can't find my action type in the reducer switch that I'm not even using in the test.

import reducer from '../../app/reducers/group';
import * as actions from '../../app/actions/group';

describe('group reducer', () => {
  test('should return the initial state', () => {
    expect(reducer(undefined, {})).toEqual({
      selected: null,
      fetching: false,
      fetched: false,
      error: null,
      items: [],
    });
  });
});

Reducer:

import {
  GROUP_LIST_REQUEST,
  GROUP_LIST_SUCCESS,
  GROUP_LIST_FAILURE,
 } from '../actions/group';

export const initialState = {
  selected: null,
  fetching: false,
  fetched: false,
  error: null,
  items: [],
};

export default function group(state = initialState, action) {
  console.log(action);

  switch (action.type) {
    case GROUP_LIST_REQUEST:
      return {
        ...state,
        fetching: true,
        fetched: false,
      };
    case GROUP_LIST_SUCCESS:
      return {
        ...state,
        fetching: false,
        fetched: true,
        items: action.groupList === undefined ? [] : action.groupList,
      };
    case GROUP_LIST_FAILURE:
      return {
        ...state,
        fetching: false,
        fetched: false,
      };
    default:
      return state;
  }
}

When I log the action I get { type: '@@redux/INIT' } which is weird because for the test I am passing an empty object.

EDIT: I am using Jest to test, maybe it has to do with the configs?

Tom Mertz · Accepted Answer · 2018-05-10 23:20:48Z

I figured it out. The stack trace was really the major clue. When I no longer imported my actions and put them direct in the reducer file it fixed the problem. The actions import was the culprit:

import {
  GROUP_LIST_REQUEST,
  GROUP_LIST_SUCCESS,
  GROUP_LIST_FAILURE,
 } from '../actions/group';

At the top of that file imported the api, which imported the store, then imported the reducers, then combined all the reducers, which of course included my group reducer I already included.

So, I'm not sure of the exact cause, but my test was definitely including way more code then it should have, which probably points to an architectural failure somewhere in the app.

My solution for now is to follow more of a ducks approach where actions are included with the reducer and action creators all in one file.

Another approach could be separating the action constants out into their own file.

Collectives™ on Stack Overflow

Error testing reducer initial state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related