英文:
Why do I get "ReferenceError: React is not defined"?
问题
以下是您提供的内容的中文翻译:
"Can someone figure out why I am getting this error?"(有人能找出我为什么会得到这个错误吗?)
src/app/page.tsx
export default function Home() {
return <div>Next的主页</div>;
}
home.test.tsx
import { render, screen } from "@testing-library/react";
import { vi, test } from "vitest";
import Home from "../app/page";
vi.mock("@frontegg/nextjs", () => {
const mockedFunctions = {
auth: () => new Promise((resolve) => resolve({ userId: "1" })),
useUser: () => ({
isSignedIn: true,
user: {
id: "1",
fullName: "假名字",
},
}),
};
return mockedFunctions;
});
vi.mock("next/font/google", () => {
return {
Inter: () => ({ className: "inter" }),
};
});
test("Home page", () => {
render(Home());
expect(screen.getByText("Next的主页")).toBeTruthy();
});
vitest.config.ts
import { defineConfig } from "vite";
export default defineConfig({
test: {
exclude: [
"**/node_modules/**",
"**/dist/**",
"**/.{git,cache,output,temp}/**",
"**/{vite,vitest}.config.*",
".*/**",
],
},
});
vite.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react-swc";
export default defineConfig({
plugins: [react()],
test: {
include: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
globals: true,
environment: "jsdom",
setupFiles: "setupTests",
mockReset: true,
},
});
tsconfig.json
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
请注意,我已将代码中的HTML编码转换成正常的HTML标记,以便更好地理解和阅读。如果您需要进一步的帮助或有其他问题,请随时告诉我。
英文:
Can someone figure out why I am getting this error?
✓ src/tests/unit.test.ts (1)
❯ src/tests/home.test.ts (1)
× Home page
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
FAIL src/tests/home.test.ts > Home page
ReferenceError: React is not defined
❯ Home src/app/page.tsx:2:3
1| export default function Home() {
2| return <div>Home of Next</div>;
| ^
3| }
4|
❯ src/tests/home.test.ts:27:10
src/app/page.tsx
export default function Home() {
return <div>Home of Next</div>;
}
home.test.tsx
import { render, screen } from "@testing-library/react";
import { vi, test } from "vitest";
import Home from "../app/page";
vi.mock("@frontegg/nextjs", () => {
const mockedFunctions = {
auth: () => new Promise((resolve) => resolve({ userId: "1" })),
useUser: () => ({
isSignedIn: true,
user: {
id: "1",
fullName: "Fake Name",
},
}),
};
return mockedFunctions;
});
vi.mock("next/font/google", () => {
return {
Inter: () => ({ className: "inter" }),
};
});
test("Home page", () => {
render(Home());
expect(screen.getByText("Home of Coach-Next")).toBeTruthy();
});
vitest.config.ts
import { defineConfig } from "vite";
export default defineConfig({
test: {
exclude: [
"**/node_modules/**",
"**/dist/**",
"**/.{git,cache,output,temp}/**",
"**/{vite,vitest}.config.*",
".*/**",
],
},
});
vite.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react-swc";
export default defineConfig({
plugins: [react()],
test: {
include: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
globals: true,
environment: "jsdom",
setupFiles: "setupTests",
mockReset: true,
},
});
tsconfig.json
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
答案1
得分: 0
感谢@evolutionxbox的评论,解决方案是在tsconfig.json
中设置:
"jsx": "react-jsx",
英文:
Thanks to @evolutionxbox comment the solution was setting
"jsx": "react-jsx",
in tsconfig.json
.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论