Inline Snapshots fail to update if test uses JSX

[illandril]

🐛 Bug Report

When updating inline snapshots, if the test file includes any JSX, it will fail with a Support for the experimental syntax 'jsx' isn't currently enabled SyntaxError.

To Reproduce

Steps to reproduce the behavior:

1. Create a test that includes jsx anywhere in the test file
2. Include a toMatchInlineSnapshot check anywhere in the test
3. Make sure the inline snapshot isn't currently valid
4. Run jest with the -u flag

If the test is run without the -u flag, the test fails due to a snapshot mismatch. If the snapshot is manually fixed to be correct, the test passes without errors. If the JSX is in a separate file and imported, the update works fine.

Expected behavior

The inline snapshot is updated

Link to repl or repo (highly encouraged)

https://replit.com/@illandril/EasyCarelessInteger

envinfo

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 14.16.1 - /usr/local/bin/node
    npm: 7.6.0 - ~/.node/bin/npm
  npmPackages:
    jest: ^27.0.3 => 27.0.3 

[eps1lon]

@SimenB Reproduction:

1. checkout https://github.com/eps1lon/react/tree/chore/jest-27-inline-snapshot-repro
2. yarn
3. yarn test ReactDOMUseId --updateSnapshot

yarn test ReactDOMUseId --updateSnapshot is working fine with Jest 26 (obviously with --updateSnapshot actually changing snapshots)

I was hoping this is just an issue with duplicate modules but it still reproduces after I ran npx yarn-deduplicate; yarn

This issue is blocking facebook/react#21575

[SimenB]

The issue is that plugins (or presets for that matter) here does not contain the jsx syntax plugin: https://github.com/facebook/jest/blob/b82fd89d16fdbe74d9bc80dd86ae4912966adc1d/packages/jest-snapshot/src/InlineSnapshots.ts#L80-L100. Mostly because of https://github.com/facebook/jest/blob/b82fd89d16fdbe74d9bc80dd86ae4912966adc1d/packages/jest-snapshot/src/InlineSnapshots.ts#L99.

Passing through config and using config.rootDir fixes it (by letting babel itself look up the babel config in the repo). Not sure if that's the correct solution, though. @jeysal thoughts?

---

Regression introduced in #7792, fwiw

[SimenB]

This diff seems sensible to me, but not 100% sure.

diff --git i/packages/jest-circus/src/legacy-code-todo-rewrite/jestAdapterInit.ts w/packages/jest-circus/src/legacy-code-todo-rewrite/jestAdapterInit.ts
index cd2781a1af..bdbe8035d4 100644
--- i/packages/jest-circus/src/legacy-code-todo-rewrite/jestAdapterInit.ts
+++ w/packages/jest-circus/src/legacy-code-todo-rewrite/jestAdapterInit.ts
@@ -156,6 +156,7 @@ export const initialize = async ({
   const snapshotState = new SnapshotState(snapshotPath, {
     expand: globalConfig.expand,
     prettierPath: config.prettierPath,
+    rootDir: config.rootDir,
     snapshotFormat: config.snapshotFormat,
     updateSnapshot: globalConfig.updateSnapshot,
   });
diff --git i/packages/jest-jasmine2/src/setup_jest_globals.ts w/packages/jest-jasmine2/src/setup_jest_globals.ts
index 1a8cec06c9..add4a72f4c 100644
--- i/packages/jest-jasmine2/src/setup_jest_globals.ts
+++ w/packages/jest-jasmine2/src/setup_jest_globals.ts
@@ -104,12 +104,13 @@ export default async function setupJestGlobals({
 
   patchJasmine();
   const {expand, updateSnapshot} = globalConfig;
-  const {prettierPath, snapshotFormat} = config;
+  const {prettierPath, rootDir, snapshotFormat} = config;
   const snapshotResolver = await buildSnapshotResolver(config, localRequire);
   const snapshotPath = snapshotResolver.resolveSnapshotPath(testPath);
   const snapshotState = new SnapshotState(snapshotPath, {
     expand,
     prettierPath,
+    rootDir,
     snapshotFormat,
     updateSnapshot,
   });
diff --git i/packages/jest-snapshot/src/InlineSnapshots.ts w/packages/jest-snapshot/src/InlineSnapshots.ts
index 4f1310528f..1bc45aeac5 100644
--- i/packages/jest-snapshot/src/InlineSnapshots.ts
+++ w/packages/jest-snapshot/src/InlineSnapshots.ts
@@ -46,6 +46,7 @@ export type InlineSnapshot = {
 
 export function saveInlineSnapshots(
   snapshots: Array<InlineSnapshot>,
+  rootDir: string,
   prettierPath: string,
 ): void {
   let prettier: Prettier | null = null;
@@ -64,6 +65,7 @@ export function saveInlineSnapshots(
     saveSnapshotsForFile(
       snapshotsByFile[sourceFilePath],
       sourceFilePath,
+      rootDir,
       prettier && semver.gte(prettier.version, '1.5.0') ? prettier : undefined,
     );
   }
@@ -72,6 +74,7 @@ export function saveInlineSnapshots(
 const saveSnapshotsForFile = (
   snapshots: Array<InlineSnapshot>,
   sourceFilePath: string,
+  rootDir: string,
   prettier?: Prettier,
 ) => {
   const sourceFile = fs.readFileSync(sourceFilePath, 'utf8');
@@ -96,7 +99,7 @@ const saveSnapshotsForFile = (
     filename: sourceFilePath,
     plugins,
     presets,
-    root: path.dirname(sourceFilePath),
+    root: rootDir,
   });
   if (!ast) {
     throw new Error(`jest-snapshot: Failed to parse ${sourceFilePath}`);
diff --git i/packages/jest-snapshot/src/State.ts w/packages/jest-snapshot/src/State.ts
index fc96a3b47a..ef424b8bfe 100644
--- i/packages/jest-snapshot/src/State.ts
+++ w/packages/jest-snapshot/src/State.ts
@@ -27,6 +27,7 @@ export type SnapshotStateOptions = {
   prettierPath: string;
   expand?: boolean;
   snapshotFormat: PrettyFormatOptions;
+  rootDir: string;
 };
 
 export type SnapshotMatchOptions = {
@@ -64,6 +65,7 @@ export default class SnapshotState {
   private _uncheckedKeys: Set<string>;
   private _prettierPath: string;
   private _snapshotFormat: PrettyFormatOptions;
+  private _rootDir: string;
 
   added: number;
   expand: boolean;
@@ -92,6 +94,7 @@ export default class SnapshotState {
     this._updateSnapshot = options.updateSnapshot;
     this.updated = 0;
     this._snapshotFormat = options.snapshotFormat;
+    this._rootDir = options.rootDir;
   }
 
   markSnapshotsAsCheckedForTest(testName: string): void {
@@ -154,7 +157,11 @@ export default class SnapshotState {
         saveSnapshotFile(this._snapshotData, this._snapshotPath);
       }
       if (hasInlineSnapshots) {
-        saveInlineSnapshots(this._inlineSnapshots, this._prettierPath);
+        saveInlineSnapshots(
+          this._inlineSnapshots,
+          this._rootDir,
+          this._prettierPath,
+        );
       }
       status.saved = true;
     } else if (!hasExternalSnapshots && fs.existsSync(this._snapshotPath)) {