Vitest, дающий TypeError: React.Act не является функцией с React Version 19. ⇐ Javascript

[Anonymous]

Я использую React версию 19 с Vite и при запуске Vitest, он дает ошибку

Код: Выделить всё

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') {

package.json - Это не устанавливает зависимости Dev, если я использую -d или -save -dev
{
"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",
"@types/react-test-renderer": "^19.1.0",
"@vitejs/plugin-react": "^4.6.0",
"@vitest/coverage-v8": "^3.2.4",
"ag-grid-react": "^34.0.0",
"antd": "^5.26.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",
"vitest-browser-react": "^1.0.0"
},
"devDependencies": {
"@eslint/js": "^9.29.0",
"eslint": "^9.29.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.2.0",
"less": "^4.3.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.34.1"
}
}
< /code>
vite.config.ts
///

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,
/* browser: {
enabled: true,
instances: [{ browser: "chromium" }],
}, */
},
});
< /code>
dtsconfig.json
"compilerOptions": {
"jsx": "react-jsx", // For React 17+ (with new JSX transform)
"module": "ESNext",
"target": "ESNext",
"moduleResolution": "Node",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"types": ["vitest/globals", "@testing-library/jest-dom"]
},
"include": ["src", "src/setupTests.ts"]
}
< /code>
setuptest.ts
import "@testing-library/jest-dom";
< /code>
import { render, screen, fireEvent } from "@testing-library/react";
import UserPopover from "./index";
import { describe, it, expect, vi, beforeEach } from "vitest";
import ReactDom from "react-dom/client";

describe("UserPopover", () => {
const mockLogout = vi.fn();
const mockCancel = vi.fn();
const mockThemeToggle = vi.fn();

beforeEach(() => {
localStorage.setItem("userName", "Test User");
mockLogout.mockClear();
mockCancel.mockClear();
mockThemeToggle.mockClear();
});

const userInfo = {
email: "test@example.com",
};

it("renders user info correctly", () => {
render(

);

expect(screen.getByText("Test User")).toBeInTheDocument();
expect(screen.getByText(userInfo.email)).toBeInTheDocument();
});
});

< /code>
Please suggest how to run unit test

Подробнее здесь: https://stackoverflow.com/questions/796 ... version-19