“为什么我会收到“ReferenceError: React is not defined”错误消息?”

huangapple go评论82阅读模式
英文:

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)
   &#215; Home page

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/tests/home.test.ts &gt; Home page
ReferenceError: React is not defined
 ❯ Home src/app/page.tsx:2:3
      1| export default function Home() {
      2|   return &lt;div&gt;Home of Next&lt;/div&gt;;
       |   ^
      3| }
      4| 
 ❯ src/tests/home.test.ts:27:10

src/app/page.tsx

export default function Home() {
  return &lt;div&gt;Home of Next&lt;/div&gt;;
}

home.test.tsx

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

vi.mock(&quot;@frontegg/nextjs&quot;, () =&gt; {
  const mockedFunctions = {
    auth: () =&gt; new Promise((resolve) =&gt; resolve({ userId: &quot;1&quot; })),
    useUser: () =&gt; ({
      isSignedIn: true,
      user: {
        id: &quot;1&quot;,
        fullName: &quot;Fake Name&quot;,
      },
    }),
  };

  return mockedFunctions;
});

vi.mock(&quot;next/font/google&quot;, () =&gt; {
  return {
    Inter: () =&gt; ({ className: &quot;inter&quot; }),
  };
});

test(&quot;Home page&quot;, () =&gt; {
  render(Home());
  expect(screen.getByText(&quot;Home of Coach-Next&quot;)).toBeTruthy();
});

vitest.config.ts

import { defineConfig } from &quot;vite&quot;;

export default defineConfig({
  test: {
    exclude: [
      &quot;**/node_modules/**&quot;,
      &quot;**/dist/**&quot;,
      &quot;**/.{git,cache,output,temp}/**&quot;,
      &quot;**/{vite,vitest}.config.*&quot;,
      &quot;.*/**&quot;,
    ],
  },
});

vite.config.ts

import { defineConfig } from &quot;vitest/config&quot;;
import react from &quot;@vitejs/plugin-react-swc&quot;;

export default defineConfig({
  plugins: [react()],
  test: {
    include: [&quot;**/__tests__/**/*.[jt]s?(x)&quot;, &quot;**/?(*.)+(spec|test).[jt]s?(x)&quot;],
    globals: true,
    environment: &quot;jsdom&quot;,
    setupFiles: &quot;setupTests&quot;,
    mockReset: true,
  },
});

tsconfig.json

{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;ES2017&quot;,
    &quot;lib&quot;: [&quot;dom&quot;, &quot;dom.iterable&quot;, &quot;esnext&quot;],
    &quot;allowJs&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;strict&quot;: true,
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;module&quot;: &quot;esnext&quot;,
    &quot;moduleResolution&quot;: &quot;node&quot;,
    &quot;resolveJsonModule&quot;: true,
    &quot;isolatedModules&quot;: true,
    &quot;jsx&quot;: &quot;preserve&quot;,
    &quot;incremental&quot;: true,
    &quot;plugins&quot;: [
      {
        &quot;name&quot;: &quot;next&quot;
      }
    ],
    &quot;paths&quot;: {
      &quot;@/*&quot;: [&quot;./src/*&quot;]
    }
  },
  &quot;include&quot;: [&quot;next-env.d.ts&quot;, &quot;**/*.ts&quot;, &quot;**/*.tsx&quot;, &quot;.next/types/**/*.ts&quot;],
  &quot;exclude&quot;: [&quot;node_modules&quot;],
  &quot;references&quot;: [{ &quot;path&quot;: &quot;./tsconfig.node.json&quot; }]
}

tsconfig.node.json

{
  &quot;compilerOptions&quot;: {
    &quot;composite&quot;: true,
    &quot;module&quot;: &quot;ESNext&quot;,
    &quot;moduleResolution&quot;: &quot;bundler&quot;,
    &quot;allowSyntheticDefaultImports&quot;: true
  },
  &quot;include&quot;: [&quot;vite.config.ts&quot;]
}

答案1

得分: 0

感谢@evolutionxbox的评论,解决方案是在tsconfig.json中设置:

"jsx": "react-jsx",
英文:

Thanks to @evolutionxbox comment the solution was setting

    &quot;jsx&quot;: &quot;react-jsx&quot;,

in tsconfig.json.

huangapple
  • 本文由 发表于 2023年8月4日 21:50:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76836567.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定