How to use jest to test React component in Vite?

[marialovesbeans]

Hi, I'm trying to test React components.

Step 1) I've created a file App.test.jsx:

// App.test.jsx
import App from './App'

const app = <App/> // <----- syntax error here

test('first test', () => {
  expect(true).toBe(true)
})

Step 2) On command line, run jest

Result:
It errors on the <App/> word saying:
Support for the experimental syntax 'jsx' isn't currently enabled. Add @babel/preset-react (https://git.io/JfeDR) 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://git.io/vb4yA) to the 'plugins' section to enable parsing.

On Vite documentation, I don't see anywhere stating how to use jest to test React component. Does anyone know? Thanks!

[patak-dev]

Here is a post explaining how to do the setup, you need the JSX babel plugin, jest and Vite are independent here

https://pranshushah.tech/getting-started-with-react-using-vitejs

At one point, we'll get first-class integration #1955

Other options for testing if you would like to explore:

• https://github.com/aelbore/vite-plugin-test
• https://github.com/betaboon/vite-web-test-runner-plugin