Current behavior

e2e/__tests__/toMatchInlineSnapshotWithJSX.test.ts

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as path from 'path';
+import * as fs from 'graceful-fs';
+import {runYarnInstall} from '../Utils';
+import {json as runWithJson} from '../runJest';
+
+const DIR = path.resolve(__dirname, '..', 'to-match-inline-snapshot-with-jsx');
+
+function cleanup() {
+  fs.copyFileSync(
+    path.join(DIR, 'MismatchingSnapshot.original.js'),
+    path.join(DIR, '__tests__/MismatchingSnapshot.test.js'),
+  );
+}
+
+beforeEach(() => {
+  runYarnInstall(DIR);
+  cleanup();
+});
+
+afterAll(() => {
+  cleanup();
+});
+
+it('successfully runs the tests inside `to-match-inline-snapshot-with-jsx/`', () => {
+  const updateSnapshotRun = runWithJson(DIR, ['--updateSnapshot']);
+  expect(updateSnapshotRun.json.testResults[0].message).toMatchInlineSnapshot(`
+    "  ● Test suite failed to run
+
+        SyntaxError: /home/eps1lon/Development/forks/jest/e2e/to-match-inline-snapshot-with-jsx/__tests__/MismatchingSnapshot.test.js: Support for the experimental syntax 'jsx' isn't currently enabled (12:26):
+
+          10 |
+          11 | test('<div>x</div>', () => {
+        > 12 |   expect(renderer.create(<div>x</div>).toJSON()).toMatchInlineSnapshot(\`
+             |                          ^
+          13 |     <div>
+          14 |       y
+          15 |     </div>
+
+        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 instantiate (../../node_modules/@babel/parser/src/parse-error/credentials.js:61:22)
+    "
+  `);
+
+  const normalRun = runWithJson(DIR, []);
+  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>
+
+          10 |
+          11 | test('<div>x</div>', () => {
+        > 12 |   expect(renderer.create(<div>x</div>).toJSON()).toMatchInlineSnapshot(\`
+             |                                                  ^
+          13 |     <div>
+          14 |       y
+          15 |     </div>
+
+          at Object.toMatchInlineSnapshot (__tests__/MismatchingSnapshot.test.js:12:50)
+    "
+  `);
+});

e2e/to-match-inline-snapshot-with-jsx/MismatchingSnapshot.original.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+test('<div>x</div>', () => {
+  expect(renderer.create(<div>x</div>).toJSON()).toMatchInlineSnapshot(`
+    <div>
+      y
+    </div>
+  `);
+});

e2e/to-match-inline-snapshot-with-jsx/__tests__/MismatchingSnapshot.test.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+test('<div>x</div>', () => {
+  expect(renderer.create(<div>x</div>).toJSON()).toMatchInlineSnapshot(`
+    <div>
+      y
+    </div>
+  `);
+});

e2e/to-match-inline-snapshot-with-jsx/package.json

@@ -0,0 +1,29 @@
+{
+  "dependencies": {
+    "@babel/preset-env": "^7.14.4",
+    "@babel/preset-react": "^7.13.13",
+    "react": "^17.0.0",
+    "react-test-renderer": "^17.0.2"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(js|jsx)$": [
+        "babel-jest",
+        {
+          "presets": [
+            [
+              "@babel/preset-env",
+              {
+                "targets": {
+                  "node": "current"
+                }
+              }
+            ],
+            "@babel/preset-react"
+          ]
+        }
+      ]
+    }
+  }
+}