Add support for `toMatchInlineSnapshot()`

[piranna]

In addition to current support to toMatchSnapshot(), add support for inline snapshots, they are easier to inspect and maintain.

[tpluscode]

I'm trying to migrate a large jest test suite to mocha. Any chance for inline snapshots?

[tpluscode]

Here's my rendition of inline snapshots, which I added to my project using patch-package as mocha-chai-jest-snapshot+1.1.4.patch

diff --git a/node_modules/mocha-chai-jest-snapshot/dist/index.d.ts b/node_modules/mocha-chai-jest-snapshot/dist/index.d.ts
index da2efa6..463cb78 100644
--- a/node_modules/mocha-chai-jest-snapshot/dist/index.d.ts
+++ b/node_modules/mocha-chai-jest-snapshot/dist/index.d.ts
@@ -16,6 +16,7 @@ declare global {
             /** Assert that the object matches the snapshot */
             toMatchSnapshot(message?: string): Assertion;
             matchSnapshot(message?: string): Assertion;
+            toMatchInlineSnapshot(snapshot: string, message?: string): void
         }
         interface ExpectStatic {
             addSnapshotSerializer(serializer: SnapshotSerializerPlugin): void;
diff --git a/node_modules/mocha-chai-jest-snapshot/dist/index.js b/node_modules/mocha-chai-jest-snapshot/dist/index.js
index cfd7a26..eadb532 100644
--- a/node_modules/mocha-chai-jest-snapshot/dist/index.js
+++ b/node_modules/mocha-chai-jest-snapshot/dist/index.js
@@ -23,6 +23,10 @@ const constants_1 = require("./constants");
 const jest_config_helper_1 = require("./utils/jest-config-helper");
 const helper_1 = require("./helper");
 const manager_1 = __importDefault(require("./manager"));
+
+const chai = require('chai');
+chai.use(require('chai-string'));
+
 let _manager;
 let _reporterAttached = false;
 function _setReporterAttached() {
@@ -67,6 +71,10 @@ const jestSnapshotPlugin = (optionalConfig) => {
                 _manager.assert(expected, message);
             });
         }
+        utils.addMethod(chai.Assertion.prototype, 'toMatchInlineSnapshot', function (actual, message) {
+          const expected = utils.flag(this, "object");
+          _manager.assertInline(expected, actual, message);
+        });
         chai.expect.addSnapshotSerializer = jest_snapshot_1.addSerializer;
     };
 };
diff --git a/node_modules/mocha-chai-jest-snapshot/dist/manager.js b/node_modules/mocha-chai-jest-snapshot/dist/manager.js
index 391e1c2..5568925 100644
--- a/node_modules/mocha-chai-jest-snapshot/dist/manager.js
+++ b/node_modules/mocha-chai-jest-snapshot/dist/manager.js
@@ -45,6 +45,17 @@ class SnapshotManager {
             expect(actual.trim()).equals(expected ? expected.trim() : "", message || `Snapshot name: \`${key}\``);
         }
     }
+    assertInline(received, inlineSnapshot, message) {
+      const { actual, expected, key, pass } = this.snapshotState.match({
+        testName: this.context.fullTitle(),
+        received,
+        inlineSnapshot,
+        isInline: true,
+      });
+      if (!pass) {
+        expect(actual).to.equalIgnoreSpaces(expected ? expected : "", message || `Snapshot name: \`${key}\``);
+      }
+    }
     saveSnap() {
         if (!this.testFile || !this.snapshotState)
             return;

Note that it requires chai-string to compare snapshot without whitespace

[tpluscode]

I found one gotcha when trying to update inline snapshots in TS project. Might need to patch jest-snapshot (jest-snapshot+28.1.3.patch)

diff --git a/node_modules/jest-snapshot/build/State.js b/node_modules/jest-snapshot/build/State.js
index 1ee5df3..68ee45f 100644
--- a/node_modules/jest-snapshot/build/State.js
+++ b/node_modules/jest-snapshot/build/State.js
@@ -161,10 +161,10 @@ class SnapshotState {
       }

       if (hasInlineSnapshots) {
-        (0, _InlineSnapshots.saveInlineSnapshots)(
-          this._inlineSnapshots,
-          this._prettierPath
-        );
+        //(0, _InlineSnapshots.saveInlineSnapshots)(
+        //  this._inlineSnapshots,
+        //  this._prettierPath
+        //);
       }

       status.saved = true;

[piranna]

Does It support adding new ones automatically? How? Do you mind creating a PR?

[tpluscode]

This is too hackish so far.

Maybe in plain JS updating inline snapshots would work. My problems appear to be with parsing TypeScript. First it complained about a decorators, which required adding a babel plugin dynamically in the jest-snapshot code. Then it failed trying to format the output with prettier.

[piranna]

Any update on this?

[mochiya98]

This feature is unsafe, so I’m not planning to add it.

[piranna]

Why do you say it's unsafe?