使用使用 Redux-toolkit 的 Jest 測試組件，“Store 沒有有效的 reducer”

Question

所以我一直在與這個問題作斗爭一段時間，我似乎無法弄清楚，我在這里做錯了什么。

我目前正在測試一個組件，該組件使用 Redux-store 為用戶獲取某些狀態。

combineReducer ，我將單獨的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硬編碼沒有效果。

Answer 1

我會假設你的userReducer導入是錯誤的路徑或類似的東西 - 在使用combineReducers之前嘗試console.log它以確保它被定義和一個函數。

此外，作為一般反饋：使用酶進行淺層渲染在未來可能不會很好地工作（這已經很成問題了）。 您可能希望研究 testing-library 以適應未來。