toMatchInlineSnapshot breaks when testing JSX syntax on a fresh CRA5 project

[FezVrasta]

Describe the bug

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

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toMatchInlineSnapshot(``);
});

Running the above test on a fresh Create React App 5.x and asking Jest to update the snapshot makes the process fail with the following error:

 FAIL  src/App.test.js
  ● Test suite failed to run

    SyntaxError: /private/tmp/cra5/src/App.test.js: Support for the experimental syntax 'jsx' isn't currently enabled (5:10):

      3 |
      4 | test('renders learn react link', () => {
    > 5 |   render(<App />);
        |          ^
      6 |   const linkElement = screen.getByText(/learn react/i);
      7 |   expect(linkElement).toMatchInlineSnapshot(``);
      8 | });

    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.

      at Parser._raise (node_modules/@babel/parser/src/parser/error.js:147:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:142:17)
      at Parser.expectOnePlugin (node_modules/@babel/parser/src/parser/util.js:205:18)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1221:16)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:670:23)
      at Parser.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:650:21)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:621:23)
      at Parser.parseMaybeUnaryOrPrivate (node_modules/@babel/parser/src/parser/expression.js:374:14)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:384:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:342:23)

Everything works fine with toMatchSnapshot

Did you try recovering your dependencies?

The project has been freshly started from scratch.

Which terms did you search for in User Guide?

toMatchInlineSnapshot

Environment

  current version of create-react-app: 5.0.0
  running from /Users/federicozivolo/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.2
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 5.0.0 => 5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Run yarn test
2. Press u to ask Jest to update the snapshot

Expected behavior

The snapshot should be updated.

Actual behavior

See error above.

Reproducible demo

https://github.com/FezVrasta/cra5-tomatchinlinesnapshot-repro

[FezVrasta]

This issue seems to be related to this Jest issue jestjs/jest#11730

[FezVrasta]

It looks like a viable workaround is to add a .babelrc to the root of the project (or as a package.json property):

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

I define it only for the test environment otherwise IDEs such as VS Code will show an error coming from babel-preset-react-app that complains about an undefined NODE_ENV value.

[AnwarBujangHuat]

try removing all .jsx inside extenstion
inside eslint

    settings: {
'import/resolver': {
  'babel-module': {
    extensions: ['.ios.js', '.android.js', '.js', '.json', '.node'],
    alias: {
      app: './app',
    },
  },
},

},