Блог

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

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

Я пытаюсь протестировать это действие, я следил за документацией redux, а также за документацией redux-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 install.

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

Спасибо

Редактировать:

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

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

 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)
  

да, согласно этой ошибке, похоже, у вас проблема с зависимостями модуля. Взгляните на свою 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()
})

  

Если вы не хотите тестировать 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}));
  });
});