Как заставить Jest работать с Vite — поддержка экспериментального синтаксиса «jsx» в настоящее время не включена

Я добавил различные зависимости, как показано ниже, но я все еще получаю сообщение

Support for the experimental syntax 'jsx' isn't currently enabled (8:12):

Обратите внимание, что это для нового проекта Vite, чтобы увидеть, как заставить шутку работать с реакцией в проекте vite. Я еще не добавил какой-либо конкретный код приложения, поэтому, какой бы ни была проблема и решение, он должен применяться ко многим другим в качестве шаблона.

Вот мои зависимости:

  "dependencies": {
    "jest": "^29.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.5.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "jest-dom": "^4.0.0",
    "react-testing-library": "^8.0.1",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
 SyntaxError: /home/durrantm/Dropnot/vite/thedeiscorecard-vite/src/App.test.tsx:
 Support for the experimental syntax 'jsx' isn't currently enabled (8:12):
                                                                                                                                                                        
       6 | describe('Main app test', () => {                                                                                                                            
       7 |   it('renders the App', () => {                                                                                                                              
    >  8 |     render(<App />);                                                                                                                                         
         |            ^                                                                                                                                                 
       9 |     const title = screen.getByText(/Vite \+ React/i);                                                                                                        
      10 |     expect(title).toBeInTheDocument();                                                                                                                       
      11 |   });                                                                                                                                                        
                                                                                                                                                                        
    Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to
    the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx
    (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx)
    to the 'plugins' section to enable parsing.

Проблема, похоже, заключается в способности Vite использовать ESM, но Jest все еще находится в мире commonJS.

Для этого есть решение, которое состоит в том, чтобы использовать экспериментальную функцию для ESM в шутке, как подробно описано на https://jestjs.io/docs/ecmascript-modules

Однако, несмотря на то, что я последовал совету, данному там, я все еще получаю сообщение об ошибке «jsx не включен в настоящее время»

Я последовал совету добавить babel.config.json (хотя esm не использует bable), поэтому я добавил файл babel.config.json. К сожалению, это дало мне

 SyntaxError: Cannot use import statement outside a module

так что это не правильное решение, и я застрял