Jest TypeError: redux action creator is not a function

Question

I am testing React, Redux App with Jest. Jest test works well with a simple function test. but an action creator test is failing throwing the error message below. It is working creator code. Dispatching this action creator in a component updates the state.

TypeError: (0 , _reserve.saveReserveInfo) is not a function

       5 |   const id = 'date';
       6 |   const value = '2018-09-30';
    >  7 |   const action = saveReserveInfo(id, value);
         |                  ^
       8 |   expect(action).toEqual({
       9 |     type: types.SAVE_RESERVE_INFO,
      10 |     id: 'date',

actionTypes.js

module.exports = {
  SAVE_RESERVE_INFO: 'SAVE_RESERVE_INFO',
  OPEN_RESERVE: 'OPEN_RESERVE',
};

reserve.action.js

import * as types from '../actionTypes';

export const saveReserveInfo = (id, value) => {
    return {
    type: types.SAVE_RESERVE_INFO,
    id,
    value,
  };
};

export const openReserve = () => ({
  type: types.OPEN_RESERVE,
});

reserve.test.js

import * as types from '../../components/actionTypes';
import { saveReserveInfo } from '../../components/reserve/reserve.action';

test('should create an action to update reserve info', () => {
  const id = 'date';
  const value = '2018-09-30';
  const action = saveReserveInfo(id, value);
  expect(action).toEqual({
    type: types.SAVE_RESERVE_INFO,
    id: 'date',
    value: '2018-09-30',
  });
});

client/jest.config.js

module.exports = {
  displayName: 'client',
  setupTestFrameworkScriptFile: require.resolve(
    '../test/setup-test-framework.js',
  ),
  modulePaths: ['<rootDir>/src'],
  moduleNameMapper: {
    '\\.scss||css$': require.resolve('../test/style-mock.js'),
    '\\.svg$': require.resolve('../test/svg-file-mock.js')
  },
};

jest.config.js

module.exports = {
  testMatch: ['**/__test__/**'],
  testPathIgnorePatterns: ['/node_modules/'],
  coverageDirectory: './coverage',
  collectCoverageFrom: [
    '**/src/**/*.js',
    '!**/__test__/**',
    '!**/node_modules/**',
  ],
  coverageThreshold: {
    global: {
      statements: 18,
      branches: 10,
      functions: 19,
      lines: 18,
    },
  },
  projects: ['./client', './server'],
};

babelrc.js

const isTest = String(process.env.NODE_ENV) === 'test';

module.exports = {
  presets: [
    [
      'env',
      {
        targets: {
          browsers: ['last 2 versions', 'safari >= 7'],
          node: 'current',
        },
        loose: true,
        modules: isTest ? 'commonjs' : false,
        debug: isTest ? false : true,
      },
    ],
    'react',
  ],
  retainLines: true,
  plugins: [
    [
      'transform-runtime',
      {
        helpers: false,
        polyfill: false,
        regenerator: true,
        moduleName: 'babel-runtime',
      },
    ],
    'transform-class-properties',
    'transform-object-rest-spread',
    'syntax-dynamic-import',
    isTest ? 'dynamic-import-node' : null,
  ].filter(Boolean),
  env: {
    development: {
      plugins: ['react-hot-loader/babel'],
    },
  },
};

version

jest: 23.5.0,
jest-dom: 1.12.0,
react: 16.4.2,
react-dom: 16.4.2,
react-redux: 5.0.7,
redux: 4.0.0,

Here is the project zip file. Thank you !!

Jiah827 Jiah827 · Accepted Answer · 2018-10-03T05:13:09

To answer my question, here is my working jest config file.

jest.config.js

module.exports = {
  testMatch: ['**/__test__/**'],
  testPathIgnorePatterns: ['/node_modules/'],
  coverageDirectory: './coverage',
  collectCoverageFrom: [
    '**/src/**/*.js',
    '!**/__test__/**',
    '!**/node_modules/**',
  ],
  projects: ['./client', './server'],
};

I deleted coverageThreshold.

Testing was failing as there was less than specified threshold. Jest coverageThreshold

Jest TypeError: redux action creator is not a function

1 Answers