时间戳

首页 > 解决方案 > 使用 Redux-toolkit 的 Jest 测试组件，“Store 没有有效的 reducer”

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

问题描述

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

我目前正在测试一个组件，它使用 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没有效果。

标签： reactjsreduxjestjs

解决方案

我会假设您的导入是错误的路径或类似的东西 -在使用之前userReducer尝试它以确保它被定义和一个函数。console.logcombineReducers

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

推荐阅读