NextJS+Vite项目中jsx配置自动变更致测试失败的解决方法

你遇到的核心问题：在Next.js项目里，为解决测试时的ReferenceError: React is not defined错误，将tsconfig.json的"jsx"设为"react-jsx"，但执行npm run dev后该配置会被自动改回"preserve"，导致测试再次失败。

方案1：为测试单独配置tsconfig（推荐） #

Next.js在开发/构建阶段会自动管理jsx配置，所以不要修改主tsconfig.json的jsx值，而是给测试环境单独创建配置文件：

1. 创建tsconfig.test.json文件
   在项目根目录新建该文件，继承主配置并覆盖jsx选项：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "include": ["src/**/*.test.ts", "src/**/*.test.tsx"]
}

2. 修改测试命令
   在package.json的scripts中，指定测试时使用这个配置文件：

{
  "scripts": {
    "test": "vitest --tsconfig tsconfig.test.json"
  }
}

3. 修复测试代码的错误写法
   你当前测试中直接调用render(Home())不符合React组件渲染规范，应该用JSX语法传入组件：

/**
 * @jest-environment jsdom
 */

import { render, screen } from "@testing-library/react";
import { test, expect } from "vitest";
import Home from "../app/page";

test("Home page", () => {
  render(<Home />);
  expect(screen.getByText("Home of Coach-Next")).toBeTruthy();
});

方案2：手动在测试文件中导入React（临时方案） #

如果不想额外创建配置文件，可以在每个测试文件顶部手动导入React：

/**
 * @jest-environment jsdom
 */

import React from "react";
import { render, screen } from "@testing-library/react";
import { test, expect } from "vitest";
import Home from "../app/page";

test("Home page", () => {
  render(<Home />);
  expect(screen.getByText("Home of Coach-Next")).toBeTruthy();
});

原因说明 #

Next.js的App Router模式默认使用jsx: "preserve"，因为框架会自行处理JSX转译逻辑（比如自动适配Next.js专属的JSX运行时），所以主配置的jsx值会被自动覆盖。而测试环境需要react-jsx让TypeScript自动注入React导入，因此单独为测试配置是最稳妥的解决方案。

内容的提问来源于stack exchange，提问作者Sandra Schlichting