错误输出是正确的，Jest在本地节点二进制文件上运行，并要求将jsx文件转换为它可以理解的语法。
默认情况下，Vite不会进行这种转换。它的设计目的是将您的代码转换并捆绑到适合浏览器的bundle.js中（它可以进行其他类型的输出，如库。您需要调整vite.config.js）。
幸运的是，其他人已经为您解决了这个问题，我推荐使用vitest，因为您不需要下载另一个transformer Transformer，也不需要花费大量时间来设置复杂的构建脚本。
以下是如何快速设置它的指南：
https://www.eternaldev.com/blog/testing-a-react-application-with-vitest/的
迁移指南：
https://vitest.dev/guide/migration.html的

• 这是为初学者从头开始设置：Vite，Jest，React，Typescript *
• • 我听说Vite和Jest在某种程度上不兼容。

但对我来说，在目前的阶段，它似乎工作。

• • （虽然，我没有深入的知识，不确定我错过了什么。
• • （如果你使用npm而不是pnpm，只需将pnpm add替换为npm install，它应该可以工作）*

过程

设置Vite
选择React Typescript
安装Jest & React测试库

pnpm create vite
pnpm add --save-dev jest @types/jest ts-jest @testing-library/jest-dom @testing-library/react @testing-library/user-event

字符串
在proj-test-vitejest/src下创建主测试文件Greet.test.tsx，
确保你import '@testing-library/jest-dom';

// import { describe, expect, test, it } from '@jest/globals'; // this doesnt work...
// import { describe, expect, test, it } from '@testing-library/jest-dom';
// import userEvent from '@testing-library/user-event';
// import '@testing-library/jest-dom/extend-expect';
// import 'jest-dom/extend-expect';
// import { Greet } from './Greet';

import '@testing-library/jest-dom';
import { render } from '@testing-library/react';

describe('Greet', () => {
  test('find AA', () => {
    const { getByText } = render(<div>Banana and Apple</div>);
    const textElement = getByText(/Banana/); // screen.getByText(/Banana/);
    expect(textElement).toBeInTheDocument();
  });

  test('find BB', () => {
    const { getByText } = render(<div>Banana and Apple</div>);
    const textElement = getByText(/Mango/);
    expect(textElement).toBeInTheDocument();
  });
});

型
现在打印脚本eslint，intellisense，import，应该都很好
此时无需手动更改tsconfig.json或package.json

• 您应该不会遇到类似Property 'toBeInTheDocument' does not exist on type 'Matchers'\

你应该能够找到方法toBeInTheDocument()在
H:\Using\proj-test-vitejest\node_modules\.pnpm\@ [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) _@ [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) \node_modules\@testing-library\jest-dom\types\matchers.d.ts
此时不需要其他程序，如

• "types": ["node", "jest", "@testing-library/jest-dom"],
• setupFilesAfterEnv: [ "<rootDir>/support/setupTests.js" ],个
• npm install @types/testing-library__jest-dom -D

运行npx jest，将失败

SyntaxError: H:\Using\proj-test-vitejest\src\Greet.test.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (13:12):

型
所以
创建jest.config.ts
将以下内容添加到jest.config.ts

transform: {
      '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest',
    },

型
Babel throwing Support for the experimental syntax 'jsx' isn't currently enabled
npx jest再试一次，失败，

Error: Jest: Failed to parse the TypeScript config file H:\Using\proj-test-vitejest\jest.config.ts
  Error: Jest: 'ts-node' is required for the TypeScript configuration files. Make sure it is installed

型
所以

pnpm install --save-dev ts-node

型
npx jest再试一次，失败，

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.```

Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module.

所以
将以下内容添加到jest.config.ts

testEnvironment: 'jsdom',

pnpm add --save-dev jest-environment-jsdom

npx jest再试一次，你现在成功了。
结果为（1次成功，1次失败（故意））

其他

如果你厌倦了每个测试文件中的import '@testing-library/jest-dom';，
你可以在Greet.test.tsx中注解它

// import '@testing-library/jest-dom';

型
在proj-test-vitejest/src下创建jest.setup.ts，

import '@testing-library/jest-dom';
// import "@testing-library/jest-dom/extend-expect";

将以下内容添加到jest.config.ts

setupFilesAfterEnv: [
      // '@testing-library/jest-dom',
      // "@testing-library/jest-dom/extend-expect",
      '<rootDir>/jest.setup.ts'
    ],

在proj-test-vitejest/src下创建Globals.d.ts，

import '@testing-library/jest-dom';
// import "@testing-library/jest-dom/extend-expect";
// declare module '@testing-library/jest-dom';

将以下内容添加到tsconfig.json

"include": ["src", "Globals.d.ts"],

Property 'toBeInTheDocument' does not exist on type 'Matchers'

概述

• 终端日志

PS H:\Using> pnpm create vite
../.pnpm-store/v3/tmp/dlx-5716           |   +1 +
../.pnpm-store/v3/tmp/dlx-5716           | Progress: resolved 1, reused 1, downloaded 0, added 1, done
√ Project name: ... proj-test-vitejest
√ Select a framework: » React
√ Select a variant: » TypeScript

Scaffolding project in H:\Using\proj-test-vitejest...

Done. Now run:

  cd proj-test-vitejest
  pnpm install
  pnpm run dev

PS H:\Using> cd proj-test-vitejest
PS H:\Using\proj-test-vitejest> pnpm add --save-dev jest @types/jest ts-jest @testing-library/jest-dom @testing-library/react @testing-library/user-event
Packages: +456
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 489, reused 456, downloaded 0, added 456, done

dependencies:
+ react 18.2.0
+ react-dom 18.2.0

devDependencies:
+ @testing-library/jest-dom 6.1.4
+ @testing-library/react 14.1.2
+ @testing-library/user-event 14.5.1
+ @types/jest 29.5.10
+ @types/react 18.2.39
+ @types/react-dom 18.2.17
+ @typescript-eslint/eslint-plugin 6.13.1
+ @typescript-eslint/parser 6.13.1
+ @vitejs/plugin-react 4.2.0
+ eslint 8.54.0
+ eslint-plugin-react-hooks 4.6.0
+ eslint-plugin-react-refresh 0.4.4
+ jest 29.7.0
+ ts-jest 29.1.1
+ typescript 5.3.2
+ vite 5.0.3

Done in 1m 15.7s
PS H:\Using\proj-test-vitejest> code .
PS H:\Using\proj-test-vitejest> pnpm install --save-dev ts-node
Packages: +19 -6
+++++++++++++++++++------
Progress: resolved 502, reused 469, downloaded 0, added 19, done

devDependencies:
+ ts-node 10.9.1

Done in 2.6s
PS H:\Using\proj-test-vitejest> pnpm add --save-dev jest-environment-jsdom
 WARN  2 deprecated subdependencies found: [email protected], [email protected]
Packages: +47
+++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 549, reused 516, downloaded 0, added 47, done

devDependencies:
+ jest-environment-jsdom 29.7.0

Done in 3.5s
PS H:\Using\proj-test-vitejest> npx jest
ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
FAIL  src/Greet.test.tsx
  Greet
    √ find AA (24 ms)
    × find BB (6 ms)

  ● Greet › find BB

    TestingLibraryElementError: Unable to find an element with the text: /Mango/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    Ignored nodes: comments, script, style
    <body>
      <div>
        <div>
          Banana and Apple
        </div>
      </div>
    </body>

      18 |   test('find BB', () => {
      19 |     const { getByText } = render(<div>Banana and Apple</div>);
    > 20 |     const textElement = getByText(/Mango/);
        |                         ^
      21 |     expect(textElement).toBeInTheDocument();
      22 |   });
      23 | });

      at Object.getElementError (node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19)
      at Object.<anonymous> (src/Greet.test.tsx:20:25)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        2.481 s
Ran all test suites.
PS H:\Using\proj-test-vitejest>

• package.json

{
  "name": "proj-test-vitejest",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.1.2",
    "@testing-library/user-event": "^14.5.1",
    "@types/jest": "^29.5.10",
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "@vitejs/plugin-react": "^4.2.0",
    "eslint": "^8.53.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "ts-jest": "^29.1.1",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2",
    "vite": "^5.0.0"
  }
}

• jest.config.ts

import type { Config } from 'jest';

export default async (): Promise<Config> => {
  return {
    // verbose: true,
    // roots: ['<rootDir>/src'], // , '<rootDir>/test'],
    // testMatch: ['**/__tests__/**/*.+(ts|tsx|js)', '**/?(*.)+(spec|test).+(ts|tsx|js)'],
    testEnvironment: 'jsdom',
    transform: {
      '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest',
    },
    setupFilesAfterEnv: [
      // '@testing-library/jest-dom',
      // "@testing-library/jest-dom/extend-expect",
      '<rootDir>/jest.setup.ts'
    ],
  };
};

• tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "Globals.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

• 文件夹结构和图像

的数据