React 19 + Vitest 单元测试报错TypeError: React.act is not a function 及依赖安装问题求助

最近在React 19 + Vite + Vitest的项目里踩了两个坑，折腾好半天没解决，来求助各位大佬：

问题1：Vitest运行单元测试时报错 TypeError: React.act is not a function #

具体报错信息如下：

FAIL src/components/UserPopover/UserPopover.test.tsx > UserPopover > calls only onCancel when "Cancel" button is clicked
TypeError: React.act is not a function
❯ exports.act node_modules/react-dom/cjs/react-dom-test-utils.production.js:20:16
❯ node_modules/@testing-library/react/dist/act-compat.js:47:25
❯ node_modules/@testing-library/react/dist/pure.js:307:28
❯ cleanup node_modules/@testing-library/react/dist/pure.js:303:22
❯ node_modules/@testing-library/react/dist/index.js:28:25
26| if (typeof afterEach === 'function') {
27| afterEach(() => {
28| (0, _pure.cleanup)();
| ^
29| });
30| } else if (typeof teardown === 'function') {

我排查的可能原因和尝试方向： #

• React 19 API变更：React 19已经移除了React.act的导出，但我用的@testing-library/react@16.3.0理论上应该适配React 19，会不会是依赖链里有旧版本的测试工具包在调用这个废弃API？
• react-test-renderer版本不匹配：我的package.json里react-test-renderer用的是^18.3.1，和React 19的版本完全不对齐，这大概率会导致测试库内部调用出错，应该升级到^19.1.0和React版本保持一致。
• 测试环境兼容性：当前Vitest配置用的是happy-dom，会不会换成jsdom能解决？或者需要给Vitest添加React 19的适配配置？

问题2：使用-D/--save-dev安装开发依赖不生效 #

我发现用npm install <package> -D安装的包，并没有自动加到package.json的devDependencies里，反而还是在dependencies里。现在我的package.json里很多本该是开发依赖的包（比如@testing-library系列、vitest、@vitejs/plugin-react等）都混在了dependencies里，手动移到devDependencies后，重新安装会不会有问题？

我的核心配置文件片段： #

package.json（简化版）

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "test": "vitest --watch",
    "test:coverage": "vitest run --coverage"
  },
  "dependencies": {
    "@ant-design/icons": "^6.0.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.3.0",
    "@testing-library/user-event": "^14.6.1",
    "@types/react": "^19.1.8",
    "@types/react-dom": "^19.1.6",
    "@vitejs/plugin-react": "^4.6.0",
    "@vitest/coverage-v8": "^3.2.4",
    "happy-dom": "^18.0.1",
    "jsdom": "^26.1.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-test-renderer": "^18.3.1",
    "vite": "^7.0.0",
    "vitest": "^3.2.4"
  },
  "devDependencies": {
    "@eslint/js": "^9.29.0",
    "eslint": "^9.29.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.34.1"
  }
}

vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    include: [
      "src/**/*.test.ts",
      "src/**/*.test.tsx",
      "src/**/*.test.js",
      "src/**/*.test.jsx",
    ],
    globals: true,
    environment: "happy-dom",
    setupFiles: "./src/setupTests.ts",
    css: true,
  },
});

我尝试的解决方向： #

1. 手动调整依赖位置：把dependencies里的开发依赖（测试、构建、类型相关）移到devDependencies里，然后执行npm install重新安装
2. 清理npm缓存：npm cache clean --force后再尝试安装新的开发依赖
3. 检查npm配置：确认npm config get save-dev返回true，如果不是就执行npm config set save-dev true

有没有大佬遇到过类似的问题？或者有其他我没考虑到的点？麻烦帮忙指点一下，谢谢！

内容来源于stack exchange