Vitest + React 18: ReferenceError: React is not defined

[jakub-murin]

I'm attempting to integrate Vitest into my React 18 project for the first time. It seems Vitest cannot handle .tsx files not importing React explicitely which is supposed to be unnecessary since React 17. The app runs fine but all tests fail with

ReferenceError: React is not defined

The only way I've found to handle the problem is to import React from "react"; in every file, which is not acceptable. I'm sure I'm missing something trivial like a config option that would solve it.

I've set up a minimal project repository on GitHub demonstrating the problem.

[sheremet-va]

Use @vitejs/plugin-react

[sheremet-va]

Looks like you have several vite versions installed. Check your package-lock.

[kristiandupont]

That was indeed the problem. I had Vite 4.3.4 but since Vitest depends on 4.1.4, I downgraded to that version.

[sheremet-va]

That was indeed the problem. I had Vite 4.3.4 but since Vitest depends on 4.1.4, I downgraded to that version.

Vitest doesn't depend on a lower version, this is just how your package manager resolves it.

[tannerhuynh]

FYI I have this plugin, but still seeing the same referenceError.

[pranay-dutta]

If you are using separate vite.config and vitest config you've to mege them together.
Read it here https://vitest.dev/guide/#configuring-vitest

Sample file of vite.config.ts after merging

import { defineConfig, mergeConfig } from "vitest/config";
import viteConfig from "./vite.config";

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      environment: "jsdom", //or which ever runtime enviroment you're using
     },
  })
);