单元测试Redux操作-Thunk未定义

Question

Wondering if someone can point out what I expect is a stupid mistake.

I have an action for user login.

I'm trying to test this action, I've followed the redux documentation as well as the redux-mock-store documentation however I keep getting an error as follows:

TypeError: Cannot read property 'default' of undefined

      4 | import thunkMiddleware from 'redux-thunk'
      5 | 
    > 6 | const middlewares = [thunkMiddleware] // add your middlewares like `redux-thunk`
        |                      ^
      7 | const mockStore = configureStore(middlewares)
      8 | 
      9 | describe("userActions", () => {

      at Object.thunkMiddleware (actions/user.actions.spec.js:6:22)

My test code is as follows:

import {userActions} from "./user.actions";
import {userConstants} from "../constants/user.constants";
import configureStore from 'redux-mock-store'
import thunkMiddleware from 'redux-thunk'

const middlewares = [thunkMiddleware] // add your middlewares like `redux-thunk`
const mockStore = configureStore(middlewares)

describe("userActions", () => {
    describe("login", () => {
        it(`should dispatch a ${userConstants.LOGIN_REQUEST}`, () =>{
            const store = mockStore({});
            return store.dispatch(userActions.login("someuser", "somepassword")).then(() => {
                expect(store.getState().loggingIn).toBeTruthy();
            });
        })
    })
});

I've double checked both redux-thunk and redux-mock-store are included in my npm dev dependencies as well as deleteing the node_modules directory and reinstalling them all with npm install.

Can anyone see what's going wrong?

Thanks

EDIT :

It seems i'm doing something fundamentally wrong, I've tried to simplify it almost back to a clean slate to find where the problem is introduced.

Even with this test:

import authentication from "./authentication.reducer";
import { userConstants } from "../constants/user.constants";

describe("authentication reducer", () => {

    it("is a passing test", () => {
        authentication();
        expect("").toEqual("");
    });
});

Against this:

function authentication(){
    return "test";
}
export default authentication

I'm getting an undefined error:

  ● authentication reducer › is a passing test

    TypeError: Cannot read property 'default' of undefined

       6 | 
       7 |     it("is a passing test", () => {
    >  8 |         authentication();
         |         ^
       9 |         expect("").toEqual("");
      10 |     });

      at Object.<anonymous> (reducers/authentication.reducer.spec.js:8:9)

Answer 1

yes, according to that error, seems you have a problem with module dependencies. Take a look at your webpack configuration.

Concerning the redux-mock-store , I suggest you to create a helper for future testing needs:

import configureStore from 'redux-mock-store'
import thunk from 'redux-thunk'

export default function(middlewares = [thunk], data = {}) {
  const mockedStore = configureStore(middlewares)

  return mockedStore(data)
}

and you will include it in your test cases and use like that:

beforeEach(() => {
  store = getMockStore()
})

afterEach(() => {
  store.clearActions()
})

Answer 2

If you wont test redux with thunk you can use redux-thunk-tester module for it.

Example:

import React from 'react';
import {createStore, applyMiddleware, combineReducers} from 'redux';
import {asyncThunkWithRequest, reducer} from './example';
import ReduxThunkTester from 'redux-thunk-tester';
import thunk from 'redux-thunk';

const createMockStore = () => {
  const reduxThunkTester = new ReduxThunkTester();

  const store = createStore(
    combineReducers({exampleSimple: reducer}),
    applyMiddleware(
      reduxThunkTester.createReduxThunkHistoryMiddleware(),
      thunk
    ),
  );

  return {reduxThunkTester, store};
};

describe('Simple example.', () => {
  test('Success request.', async () => {
    const {store, reduxThunkTester: {getActionHistoryAsync, getActionHistoryStringifyAsync}} = createMockStore();

    store.dispatch(asyncThunkWithRequest());

    const actionHistory = await getActionHistoryAsync(); // need to wait async thunk (all inner dispatch)

    expect(actionHistory).toEqual([
      {type: 'TOGGLE_LOADING', payload: true},
      {type: 'SOME_BACKEND_REQUEST', payload: 'success response'},
      {type: 'TOGGLE_LOADING', payload: false},
    ]);

    expect(store.getState().exampleSimple).toEqual({
      loading: false,
      result: 'success response'
    });

    console.log(await getActionHistoryStringifyAsync({withColor: true}));
  });
});