You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vitest报错createAsyncThunk is not a function,同类问题方案无效

Vitest运行Redux Toolkit测试时出现TypeError: createSlice is not a function错误(同类问题解决方案无效)

我遇到了类似的TypeError: createSlice is not a function错误,但对应问题给出的解决方案对我无效。

我已经通过yarn upgrade-interactive将所有依赖包更新至最新版本,TypeScript编译完全正常,且换回Jest后测试可以正常运行,说明问题并非出在代码本身,但我希望能找到让Vitest正常工作的方案。

我的package.json内容:

{
  "name": "tenzies-with-redux",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@types/uuid": "^9.0.0",
    "@vitejs/plugin-react": "^3.0.0",
    "prettier": "2.8.1",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vitest": "^0.27.1"
  }
}

测试代码:

import { beforeEach, describe, expect, it } from 'vitest'
import { ReduxStore } from '../../../react-view/main'
import { configureStoreWith } from '../../../app/store'
import { Dependencies } from '../../../app/dependencies'
import { InMemoryIdProvider } from '../../../infrastructure/idProvider/InMemoryIdProvider'
import { InMemoryRandomDiceProvider } from '../../../infrastructure/randomDiceProvider/InMemoryRandomDiceProvider'
import { rollDice } from '../diceSlice'

describe('Generate Random Dice', () => {
  let store: ReduxStore
  let dependencies: Dependencies

  beforeEach(() => {
    dependencies = {
      idProvider: new InMemoryIdProvider(),
      randomDiceProvider: new InMemoryRandomDiceProvider(),
    }
    store = configureStoreWith(dependencies)
  })

  it('should generate 10 random dice', () => {
    store.dispatch(rollDice())
    const state = store.getState()

    expect(state).toBe('something')
  })
})

被测试代码(SUT):

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { Dependencies } from '../../app/dependencies'
import { Die } from './entities/Die'

type ExtraDependencies = {
  extra: Dependencies
}

export const rollDice = createAsyncThunk<Die, void, ExtraDependencies>(
  `dice/rollDice`,
  async (thunkAPI, { extra: { randomDiceProvider, idProvider } }) => {
    const number = randomDiceProvider.generateRandomDieValue()
    const id = idProvider.getNew()
    return new Die(id, { value: number, isHeld: false })
  },
)

export const initialState = {
  dice: [] as Die[],
  loading: false,
  error: null,
}

export const diceSlice = createSlice({
  name: 'dice',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(rollDice.fulfilled, (state, action) => {
      const payload = action.payload
      state.dice.push(payload)
    })
  },
})

我是不是遗漏了什么配置或步骤?

内容的提问来源于stack exchange,提问作者A Mehmeto

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.04 22:20:39