使用 Redux-toolkit 的 Jest 测试组件，“Store 没有有效的 reducer”

Question

所以我一直在与这个问题作斗争一段时间，我似乎无法弄清楚我在这里做错了什么。

我目前正在测试一个组件，该组件使用 Redux-store 为用户获取某些状态。

照原样，我将单独的 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 以确保它已定义并且是一个函数。

此外，作为一般反馈：使用酶进行的浅层渲染将来可能不会很好地工作（这已经很成问题了）。您可能希望查看测试库以确保未来的发展。