fix: Allow updating inline snapshots when test includes JSX (#12760)

Co-authored-by: Simen Bekkhus <sbekkhus91@gmail.com>

Author: eps1lon

CHANGELOG.md

@@ -19,6 +19,7 @@
 - `[@jest/expect-utils]` Fix deep equality of ImmutableJS Record ([#13055](https://github.com/facebook/jest/pull/13055))
 - `[jest-haste-map]` Increase the maximum possible file size that jest-haste-map can handle ([#13094](https://github.com/facebook/jest/pull/13094))
 - `[jest-snapshot]` Make `prettierPath` optional in `SnapshotState` ([#13149](https://github.com/facebook/jest/pull/13149))
+- `[jest-snapshot]` Fix parsing error from inline snapshot files with `JSX` ([#12760](https://github.com/facebook/jest/pull/12760))
 - `[jest-worker]` When a process runs out of memory worker exits correctly and doesn't spin indefinitely ([#13054](https://github.com/facebook/jest/pull/13054))
 
 ### Chore & Maintenance

e2e/__tests__/toMatchInlineSnapshotWithJSX.test.ts

@@ -109,3 +109,52 @@ it('successfully runs the tests with external babel config', () => {
   expect(updateSnapshotRun.exitCode).toBe(0);
   expect(updateSnapshotRun.stderr).toContain('1 snapshot updated.');
 });
+
+it('successfully runs the tests with inline babel config', () => {
+  writeFiles(DIR, {
+    'package.json': JSON.stringify({
+      ...pkg,
+      jest: {
+        testEnvironment: 'jsdom',
+        transform: {
+          '^.+\\.(js|jsx)$': ['babel-jest', babelConfig],
+        },
+      },
+    }),
+  });
+
+  const normalRun = runWithJson(DIR, []);
+  expect(normalRun.exitCode).toBe(1);
+  expect(normalRun.stderr).toContain('1 snapshot failed from 1 test suite.');
+  expect(normalRun.json.testResults[0].message).toMatchInlineSnapshot(`
+    "  ● <div>x</div>
+
+        expect(received).toMatchInlineSnapshot(snapshot)
+
+        Snapshot name: \`<div>x</div> 1\`
+
+        - Snapshot  - 1
+        + Received  + 1
+
+          <div>
+        -   y
+        +   x
+          </div>
+
+          3 |
+          4 | test('<div>x</div>', () => {
+        > 5 |   expect(renderer.create(<div>x</div>).toJSON()).toMatchInlineSnapshot(\`
+            |                                                  ^
+          6 |     <div>
+          7 |       y
+          8 |     </div>
+
+          at Object.toMatchInlineSnapshot (__tests__/MismatchingSnapshot.test.js:5:50)
+    "
+  `);
+
+  const updateSnapshotRun = runJest(DIR, ['--updateSnapshot']);
+
+  expect(updateSnapshotRun.exitCode).toBe(0);
+  expect(updateSnapshotRun.stderr).toContain('1 snapshot updated.');
+});

packages/jest-snapshot/package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@babel/core": "^7.11.6",
     "@babel/generator": "^7.7.2",
+    "@babel/plugin-syntax-jsx": "^7.7.2",
     "@babel/plugin-syntax-typescript": "^7.7.2",
     "@babel/traverse": "^7.7.2",
     "@babel/types": "^7.3.3",

packages/jest-snapshot/src/InlineSnapshots.ts

@@ -6,7 +6,7 @@
  */
 
 import * as path from 'path';
-import type {PluginItem} from '@babel/core';
+import type {ParseResult, PluginItem} from '@babel/core';
 import {Expression, File, Program, isAwaitExpression} from '@babel/types';
 import * as fs from 'graceful-fs';
 import type {
@@ -95,12 +95,39 @@ const saveSnapshotsForFile = (
   // by one to formatting parser.
   const snapshotMatcherNames: Array<string> = [];
 
-  const ast = parseSync(sourceFile, {
-    filename: sourceFilePath,
-    plugins,
-    presets,
-    root: rootDir,
-  });
+  let ast: ParseResult | null = null;
+
+  try {
+    ast = parseSync(sourceFile, {
+      filename: sourceFilePath,
+      plugins,
+      presets,
+      root: rootDir,
+    });
+  } catch (error: any) {
+    // attempt to recover from missing jsx plugin
+    if (error.message.includes('@babel/plugin-syntax-jsx')) {
+      try {
+        const jsxSyntaxPlugin: PluginItem = [
+          require.resolve('@babel/plugin-syntax-jsx'),
+          {},
+          // unique name to make sure Babel does not complain about a possible duplicate plugin.
+          'JSX syntax plugin added by Jest snapshot',
+        ];
+        ast = parseSync(sourceFile, {
+          filename: sourceFilePath,
+          plugins: [...plugins, jsxSyntaxPlugin],
+          presets,
+          root: rootDir,
+        });
+      } catch {
+        throw error;
+      }
+    } else {
+      throw error;
+    }
+  }
+
   if (!ast) {
     throw new Error(`jest-snapshot: Failed to parse ${sourceFilePath}`);
   }

yarn.lock

@@ -1030,7 +1030,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.18.6":
+"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.18.6, @babel/plugin-syntax-jsx@npm:^7.7.2":
   version: 7.18.6
   resolution: "@babel/plugin-syntax-jsx@npm:7.18.6"
   dependencies:
@@ -12847,6 +12847,7 @@ __metadata:
   dependencies:
     "@babel/core": ^7.11.6
     "@babel/generator": ^7.7.2
+    "@babel/plugin-syntax-jsx": ^7.7.2
     "@babel/plugin-syntax-typescript": ^7.7.2
     "@babel/preset-flow": ^7.7.2
     "@babel/preset-react": ^7.12.1