使用Vitest测试React+Redux井字棋时遇createSlice is not a function错误

我正在用React结合Redux开发井字棋游戏，同时尝试用Vitest做测试。已经配置好board slice和store，但运行第一个测试时出现了如下错误：

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/slices/board/reducers/updateMoveReducer.test.js [ src/slices/board/reducers/updateMoveReducer.test.js ]
TypeError: createSlice is not a function
 ❯ src/slices/board/board.js:11:20
      9| };
     10| 
     11| const boardSlice = createSlice({
       |                    ^
     12|  name: 'board',
     13|  initialState,
 ❯ src/slices/board/reducers/updateMoveReducer.test.js:1:31

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  no tests
   Start at  13:36:13
   Duration  1.27s (transform 371ms, setup 0ms, collect 0ms, tests 0ms)

我的gameStore代码：

import boardReducer from './slices/board/board';
import { configureStore } from '@reduxjs/toolkit';

export const gameStore = configureStore({
    reducer: {
        board: boardReducer,
    },
});

board slice代码：

import { createSlice } from '@reduxjs/toolkit';
import { updateMoveReducer } from './reducers/updateMoveReducer';
const initialState = {
    tiles: [
        [undefined, undefined, undefined],
        [undefined, undefined, undefined],
        [undefined, undefined, undefined],
    ],
};

const boardSlice = createSlice({
    name: 'board',
    initialState,
    reducers: {
        updateMove: updateMoveReducer,
    },
});

export const { updateMove } = boardSlice.actions;
export default boardSlice.reducer;

updateMoveReducer代码：

export const updateMoveReducer = (state, action) => {
    return state;
};

我已经在应用里通过Provider配置了store，Redux Chrome DevTools显示slice配置正常，但运行以下测试时出现上述错误：

import { updateMove } from '../board';
import { gameStore } from '../../../gameState';
import { expect, it, describe } from 'vitest';

describe('updateMoveReducer', () => {
    it('should update the tiles array with the move', () => {
        const player = 'x';
        const move = { x: 0, y: 0 };
        gameStore.dispatch(updateMove({ player, move }));
        const state = gameStore.getState().board;
        expect(state.tiles[move.x][move.y]).toBe(player);
    });
});

解决方法 #

1. 检查依赖与导入正确性 #

这个错误核心是createSlice未被正确识别，先做基础排查：

• 确认@reduxjs/toolkit已安装：

  npm install @reduxjs/toolkit
  # 或 yarn add @reduxjs/toolkit
  

• 核对board slice中的导入语句，确保没有拼写错误：

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

2. 配置Vitest支持React/Redux编译 #

Vitest默认可能无法正确处理Redux Toolkit的语法，需调整配置：

• 安装React插件：

  npm install -D @vitejs/plugin-react
  

• 在vitest.config.js中添加配置：

  import { defineConfig } from 'vitest/config';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    test: {
      environment: 'jsdom',
      globals: true,
    },
  });
  

3. 优化测试逻辑 #

当前测试使用全局store易导致状态污染，同时需完善reducer逻辑：

• 测试中创建独立store实例：

  import { updateMove } from '../board';
  import { configureStore } from '@reduxjs/toolkit';
  import boardReducer from '../board';
  import { expect, it, describe } from 'vitest';
  
  describe('updateMoveReducer', () => {
      it('should update the tiles array with the move', () => {
          const store = configureStore({
              reducer: { board: boardReducer },
          });
          const player = 'x';
          const move = { x: 0, y: 0 };
          store.dispatch(updateMove({ player, move }));
          const state = store.getState().board;
          expect(state.tiles[move.x][move.y]).toBe(player);
      });
  });
  

• 修复updateMoveReducer的逻辑（Redux Toolkit内置Immer，可直接修改状态）：

  export const updateMoveReducer = (state, action) => {
      const { player, move } = action.payload;
      state.tiles[move.x][move.y] = player;
  };
  

内容的提问来源于stack exchange，提问作者Sambo