Модульный тест Redux Action - Thunk Undefined

Question

Интересно, если кто-то может указать, что я ожидаю, это глупая ошибка.

У меня есть действие для входа в систему пользователя.

Я пытаюсь проверить это действие, я следовалДокументация Redx, а также документация Redx-Mock-Store, однако я получаю сообщение об ошибке:

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)

Мой тестовый код выглядит следующим образом:

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();
            });
        })
    })
});

Я имеюдважды проверил, что redux-thunk и redux-mock-store включены в мои зависимости npm dev, а также удаляют каталог node_modules и переустанавливают их все с помощью установки npm.

Кто-нибудь может увидеть, что идет не так?

Спасибо

РЕДАКТИРОВАТЬ :

Кажется, я делаю что-то в корне неправильно, я пытался упростить это почти до чистого листа, чтобы найти, гдепроблема введена.

Даже с этим тестом:

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

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

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

Против этого:

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

Я получаю неопределенную ошибку:

  ● 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

Если вы не будете тестировать Redux с Thunk, вы можете использовать для него модуль redux-Thunk-Tester .

Пример:

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}));
  });
});

Answer 2

да, согласно этой ошибке, кажется, у вас проблема с зависимостями модуля.Посмотрите на вашу webpack конфигурацию.

Что касается redux-mock-store, я предлагаю вам создать помощника для будущих нужд тестирования:

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

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

  return mockedStore(data)
}

, и вы включите его в свойтестовые случаи и использование так:

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

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