Блог

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

В настоящее время я нахожусь в процессе тестирования компонента, который использует Redux-хранилище для получения определенных состояний для пользователя.

Как есть, я сохраняю отдельные reducers combineReducer и Store отдельные файлы для лучшей структуры по мере роста проекта.

В настоящее время у меня просто есть очень простой тест, который в основном позволяет мне узнать, отображается компонент или нет:

 test('Component renders', () => {
    const test = shallow(<Provider store={mockStore}>
        <UserPage />
    </Provider>)
    expect(test).not.toBeNull()
})
 

В настоящее время я пытаюсь вернуться назад в процессе выяснения того, почему мой тест проходит с кучей ошибок:

Для меня работает следующее (я помещаю все в свой тестовый файл):

 import { userObject } from "../../constants";
import { combineReducers, configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import UserPage from './UserPage';

const initialState = {
    user: userObject,
    loadingUser: false,
};
const userSlice = createSlice({
    name: 'user',
    initialState: initialState,
    reducers: {
        setUser(state, action) {
            state.user = action.payload
        },
        setLoadingUser(state) {
            state.loadingUser = !state.loadingUser
        }
    }
})

const reducers = combineReducers({
    user: userReducer
});



const mockStore = configureStore({ reducer: reducers })

test('Component renders', () => {
    const test = shallow(<Provider store={mockStore}>
        <UserPage />
    </Provider>)
    expect(test).not.toBeNull()
})
 

Естественно, это не оптимально, потому что я хочу проверить свой настоящий редуктор — Поэтому я пошел дальше и сделал следующее (в качестве следующего шага в обратном направлении — понимание того, почему он не работает).:

 import userReducer from '../PATH/userReducer'
import { userObject } from "../../constants";


const reducers = combineReducers({
    user: userReducer
});
const mockStore = configureStore({ reducer: reducers })

test('Component renders', () => {
    const test = shallow(<Provider store={mockStore}>
        <UserPage />
    </Provider>)
    expect(test).not.toBeNull()
})
 

Мой Редуктор:

 import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    user: userObject,
    loadingUser: false,
};


const userSlice = createSlice({
    name: 'user',
    initialState: initialState,
    reducers: {
        setUser(state, action) {
            state.user = action.payload
        },
        setLoadingUser(state) {
            state.loadingUser = !state.loadingUser
        }
    }
})

export default userSlice.reducer;
 

Теперь мой тест проходит, но по какой — то причине-он выдает мне кучу ошибок (что в конечном итоге приведет к провалу моих дальнейших тестов, потому что редуктор «не определен»).

ошибки консоли:

 console.error
Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.

  at warning (node_modules/redux/lib/redux.js:402:13)
  at currentReducer (node_modules/redux/lib/redux.js:525:9)
  at dispatch (node_modules/redux/lib/redux.js:296:22)
  at apply (node_modules/redux/lib/redux.js:382:3)
  at node_modules/redux/lib/redux.js:658:31
  at createStore (node_modules/redux/lib/redux.js:162:12)
  at configureStore (node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.development.js:536:12)
 

ПРИМЕЧАНИЕ. Жесткое кодирование userObject не оказывает эффекта.

Я бы предположил, что ваш импорт userReducer — это неправильный путь или что-то подобное-попробуйте console.log его перед использованием combineReducers , чтобы убедиться, что он определен и функция.

Кроме того, в качестве общей обратной связи: неглубокий рендеринг с помощью фермента, вероятно, не будет работать очень хорошо в будущем (это уже довольно проблематично). Возможно, вы захотите заглянуть в библиотеку тестирования, чтобы быть уверенными в будущем.