0

I am using React version 19 with Vite and when run Vitest, it's giving error

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 - it is not installing dev dependencies, if I use -D or --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"
  }
}

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,
    /* browser: {
      enabled: true,
      instances: [{ browser: "chromium" }],
    }, */
  },
});

tsconfig.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"]
}

setupTest.ts

import "@testing-library/jest-dom";
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: "[email protected]",
  };

  it("renders user info correctly", () => {
    render(
      <UserPopover
        userInfo={userInfo}
        onLogout={mockLogout}
        onCancel={mockCancel}
        onThemeToggle={mockThemeToggle}
        theme="light"
      />
    );

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

Please suggest how to run unit test

2
  • Did you find a fix for this? I'm encountering the same issue on Vercel. Commented Aug 2 at 20:17
  • 1
    update: solved in my case. NODE_ENV had to be set to test in my Vercel environment. Commented Aug 3 at 18:26

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.