"Support for the experimental syntax 'jsx' isn't currently enabled" in Vitest

Question

I am using Vite and I've installed vitest

Error:

Details:                                                                                                                                         
                                                                                                                                                     
    SyntaxError: /home/durrantm/Dropnot/vite/thedeiscorecard-vite/src/App.test.tsx:  
 Support for the experimental syntax 'jsx' isn't currently enabled
 (6:27):                                                                                                                                             
                                                                                                                                                     
      4 | describe('test', () => {                                                                                                                   
      5 |   it('works', () => {                                                                                                                      
      6 |     render(<App/>);                                                                                                         
      7 |     const text = screen.getByText('vite');                                                                                                 
      8 |     expect(text).toBe(true);                                                                                                               
      9 |   })                                                                                                                                       

My test is

import { render, screen } from '@testing-library/react'
import App from './App';

describe('test', () => {
  it('works', () => {
    const result = render(<App/>);
    const text = screen.getByText('vite');
    expect(text).toBe(true);
  })
})

My package.json has Vite, Vitest, Jest, and Mocha:

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "jest": "^29.5.0",
    "mocha": "^10.2.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vitest": "^0.29.8"
  }

My vitest config is:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    include: ['**/*.test.tsx']
    // ...
  },
})

Answer 1

vitest = vite plugin so whatever vitest can't do let vite take care:

vitest.config.ts

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vitest/config'

export default defineConfig({
  plugins: [react()],
  test: {
    ...
  }
})