Support for the experimental syntax 'jsx' isn't currently enabled when using `toMatchInlineSnapshot` in Jest 27

🐛 Bug Report

i’m using babel-jest with babel-preset-react-app in a Vite project, everything works fine except toMatchInlineSnapshot, whenever i use it, Jest throws

  SyntaxError: .../name.test.js: 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.

I rolled back to Jest 26.6.3 and it works fine

jest.config.js

{
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest/mocks/fileMock.js",
    "\\.(css)$": "identity-obj-proxy",
  },
  "setupFiles": ["<rootDir>/jest/setup-test-env.js"],
  "globalSetup": "<rootDir>/jest/globalSetup.js",
  "testMatch": ["<rootDir>/src/**/*.test.js"],
  "verbose": false,
  "testEnvironment": "jsdom",
  "setupFilesAfterEnv": ["<rootDir>/jest/setup-test-after-env.js"],
  "transformIgnorePatterns": ["node_modules", "^.+\\.module\\.(css)$"],
  "modulePathIgnorePatterns": ["<rootDir>[/\\\\](build|docs|node_modules|scripts|dist)[/\\\\]"],
  "transform": {
    "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "babel-jest",
    "^.+\\.css$": "<rootDir>/jest/mocks/cssMock.js"
  },
}

babel.config.json

{
  "presets": ["react-app"]
}

To Reproduce

Steps to reproduce the behavior:

create a Vite project with Jest.

Expected behavior

Expect to parse JSX for toMatchInlineSnapshot too

Link to repl or repo (highly encouraged)

Repo with codesandbox: https://github.com/SarKurd/jest-bug-11730

envinfo

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
  npmPackages:
    jest: ^27.0.6 => 27.0.6 

[sigveio]

Hey @jsg2021 - take a look at the last few posts in #11741. Perhaps it could help make a bit more sense out of it?

[sigveio]

@SarKurd No problem, but I think you need to troubleshoot further. The error you are getting strongly suggests that its a configuration issue. And there should be some valid tips for you in what I have said so far. Both in terms of what you can do, and where you can get more help.

Before I suggested it to you, I tested with the preconfigured setup from create-react-app - and toMatchInlineSnapshot() worked fine. This is still using Jest 26.x, but I tested again with upgrading all the jest and babel packages to their latest version on that same configuration, and with Jest 27 it still worked. The only thing I had to manually fix was to add a require-workaround for createTransformer in babelTransform.js as suggested here.

In case you are not aware of it; after installing with the create-react-app util, you can use yarn eject (inside the directory it creates) to copy build dependencies, configuration files, and scripts into the app directory. Please note that this is a one-way operation, so it’d be best to do it on a clean install just to be able to look at the configuration and compare to your own setup.