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

[SarKurd]

🐛 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]

Hi @SarKurd,

Perhaps the guide on testing React could offer some hints on how to get this working, if you haven't seen it already.

For getting further help, please check out the following resources:

• The Jest help page
• Our #testing channel in Reactiflux
• The jestjs tag on StackOverflow

If you believe there is a bug in Jest, please provide a minimal reproduction (in a repl.it demo or a repository on GitHub) that demonstrates the issue. See https://stackoverflow.com/help/minimal-reproducible-example for information on how to create good reproductions.

[SarKurd]

Hi @SarKurd,

Perhaps the guide on testing React could offer some hints on how to get this working, if you haven't seen it already.

For getting further help, please check out the following resources:

• The Jest help page
• Our #testing channel in Reactiflux
• The jestjs tag on StackOverflow

If you believe there is a bug in Jest, please provide a minimal reproduction (in a repl.it demo or a repository on GitHub) that demonstrates the issue. See stackoverflow.com/help/minimal-reproducible-example for information on how to create good reproductions.

Thanks @sigveio, i added a minimal repo with Codesandbox link in the readme

[sigveio]

Thanks for adding a repo, @SarKurd. =) Would you be able to explain why you think this is a bug in Jest and not a problem with your code or configuration?

[SarKurd]

It only fails when using toMatchInlineSnapshot so i'm not sure if there is some i missed but followed the docs as described

[sigveio]

I understand, but this issue tracker is not meant to be a help forum - so if you are not sure what the problem is, it would be best if you use one of the resources I mentioned earlier to ask for help.

The process outlined in the page I linked to about creating minimal reproductions can also help you troubleshoot.

For example; If you do as the suggestion at the beginning of the Testing React Apps guide and create a clean preconfigured react app with create-react-app and then use the react-test-renderer as shown in the guide, I think you would find that toMatchInlineSnapshot() works. Perhaps you can compare that to your own setup and try to figure out what's different. Or alternatively, start from scratch using the setup that works.

[SarKurd]

@sigveio sorry but i was confident it was a bug that's why i posted it here.

I rolled back to jest 26.6.3 and it works fine

[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.

[SarKurd]

Thanks @sigveio it indeed fixed the issue but still looks like a bug to me since i had to use a workaround for tha.

Will close this.

for future readers

jest.config.json

  "^.+\\.(js|jsx)$": "<rootDir>/jest/babelTransform.js",

babelTransform.js

const babelJest = require("babel-jest").default;

module.exports = babelJest.createTransformer();

[jsg2021]

I just experienced this. Spent all week off and on trying to figure out why my babel config wasn't applying... after removing the 'inline' portion of my new assertion, my test started working.

I used this to see the applied config... nothing popped out at me as wrong (unless presets do not merge across configs, in which case jests' preset is stomping mine)

BABEL_SHOW_CONFIG_FOR=<path to spec> jest <path to spec>

in jest config i have a mapping like the above too:

'\\.[jt]sx?$': resolve('config/jest/babelTransform.js'),

and it's this:

const { default: babelJest } = require('babel-jest');

module.exports = babelJest.createTransformer({
	configFile: false,
	presets: [ '<absolute path to project babel config>' ],
});

I'm fine with not using inline snapshots, but man... it doesn't make sense to me yet. It should be using my babel config... but jsx in the spec file mixed with toMatchInlineSnapshot fail.

[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?

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.