jest-snapshot: Ignore indentation for most serialized objects

CHANGELOG.md

@@ -28,6 +28,7 @@
 - `[jest-snapshot]` Display change counts in annotation lines ([#8982](https://github.com/facebook/jest/pull/8982))
 - `[jest-snapshot]` [**BREAKING**] Improve report when the matcher has properties ([#9104](https://github.com/facebook/jest/pull/9104))
 - `[jest-snapshot]` Improve colors when snapshots are updatable ([#9132](https://github.com/facebook/jest/pull/9132))
+- `[jest-snapshot]` Ignore indentation for most serialized objects ([#9203](https://github.com/facebook/jest/pull/9203))
 - `[@jest/test-result]` Create method to create empty `TestResult` ([#8867](https://github.com/facebook/jest/pull/8867))
 - `[jest-worker]` [**BREAKING**] Return a promise from `end()`, resolving with the information whether workers exited gracefully ([#8206](https://github.com/facebook/jest/pull/8206))
 - `[jest-reporters]` Transform file paths into hyperlinks ([#8980](https://github.com/facebook/jest/pull/8980))

packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap

@@ -375,6 +375,90 @@ Snapshot: <m>"delete"</>
 Received: <t>"insert"</>
 `;
 
+exports[`printSnapshotAndReceived ignore indentation markup delete 1`] = `
+<m>- Snapshot  - 2</>
+<t>+ Received  + 0</>
+
+<d>  <div></>
+<m>-   <div></>
+<d>    <h3></>
+<d>      Ignore indentation for most serialized objects</>
+<d>    </h3></>
+<d>    <p></>
+<d>      Call<Y> </Y></>
+<d>      <code></>
+<d>        diffLinesUnified2</>
+<d>      </code></>
+<d>       to compare without indentation</>
+<d>    </p></>
+<m>-   </div></>
+<d>  </div></>
+`;
+
+exports[`printSnapshotAndReceived ignore indentation markup fall back 1`] = `
+<m>- Snapshot  - 5</>
+<t>+ Received  + 7</>
+
+<m>- <pre</>
+<m>-   className="language-js"</>
+<m>- ></>
+<m>-   for (key in foo) {</>
+<t>+ <div></>
+<t>+   <pre</>
+<t>+     className="language-js"</>
+<t>+   ></>
+<t>+     for (key in foo) {</>
+<d>    if (Object.prototype.hasOwnProperty.call(foo, key)) {</>
+<d>      doSomething(key);</>
+<d>    }</>
+<d>  }</>
+<m>- </pre></>
+<t>+   </pre></>
+<t>+ </div></>
+`;
+
+exports[`printSnapshotAndReceived ignore indentation markup insert 1`] = `
+<m>- Snapshot  - 0</>
+<t>+ Received  + 7</>
+
+<d>  <th></>
+<t>+   <span></>
+<d>      when</>
+<t>+   </span></>
+<t>+   <abbr</>
+<t>+     title="ascending from older to newer"</>
+<t>+   ></>
+<t>+     ↓</>
+<t>+   </abbr></>
+<d>  </th></>
+`;
+
+exports[`printSnapshotAndReceived ignore indentation object delete 1`] = `
+<m>- Snapshot  - 2</>
+<t>+ Received  + 0</>
+
+<d>  Object {</>
+<m>-   "payload": Object {</>
+<d>    "text": "Ignore indentation in snapshot",</>
+<d>    "time": "2019-11-11",</>
+<m>-   },</>
+<d>    "type": "CREATE_ITEM",</>
+<d>  }</>
+`;
+
+exports[`printSnapshotAndReceived ignore indentation object insert 1`] = `
+<m>- Snapshot  - 0</>
+<t>+ Received  + 2</>
+
+<d>  Object {</>
+<t>+   "payload": Object {</>
+<d>      "text": "Ignore indentation in snapshot",</>
+<d>      "time": "2019-11-11",</>
+<t>+   },</>
+<d>    "type": "CREATE_ITEM",</>
+<d>  }</>
+`;
+
 exports[`printSnapshotAndReceived isLineDiffable false asymmetric matcher 1`] = `
 Snapshot: <m>null</>
 Received: <t>Object {</>

packages/jest-snapshot/src/__tests__/dedentLines.test.ts

@@ -0,0 +1,249 @@
+/**
+ * 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 format = require('pretty-format');
+import {dedentLines} from '../dedentLines';
+
+const $$typeof = Symbol.for('react.test.json');
+const plugins = [format.plugins.ReactTestComponent];
+
+const formatLines2 = val => format(val, {indent: 2, plugins}).split('\n');
+const formatLines0 = val => format(val, {indent: 0, plugins}).split('\n');
+
+describe('dedentLines non-null', () => {
+  test('no lines', () => {
+    const indented = [];
+    const dedented = indented;
+
+    expect(dedentLines(indented)).toEqual(dedented);
+  });
+
+  test('one line empty string', () => {
+    const indented = [''];
+    const dedented = indented;
+
+    expect(dedentLines(indented)).toEqual(dedented);
+  });
+
+  test('one line empty object', () => {
+    const val = {};
+    const indented = formatLines2(val);
+    const dedented = formatLines0(val);
+
+    expect(dedentLines(indented)).toEqual(dedented);
+  });
+
+  test('one line self-closing element', () => {
+    const val = {
+      $$typeof,
+      children: null,
+      type: 'br',
+    };
+    const indented = formatLines2(val);
+    const dedented = formatLines0(val);
+
+    expect(dedentLines(indented)).toEqual(dedented);
+  });
+
+  test('object value empty string', () => {
+    const val = {
+      key: '',
+    };
+    const indented = formatLines2(val);
+    const dedented = formatLines0(val);
+
+    expect(dedentLines(indented)).toEqual(dedented);
+  });
+
+  test('object value string includes double-quote marks', () => {
+    const val = {
+      key: '"Always bet on JavaScript",',
+    };
+    const indented = formatLines2(val);
+    const dedented = formatLines0(val);
+
+    expect(dedentLines(indented)).toEqual(dedented);
+  });
+
+  test('markup with props and text', () => {
+    const val = {
+      $$typeof,
+      children: [
+        {
+          $$typeof,
+          props: {
+            alt: 'Jest logo',
+            src: 'jest.svg',
+          },
+          type: 'img',
+        },
+        {
+          $$typeof,
+          children: ['Delightful JavaScript testing'],
+          type: 'h2',
+        },
+      ],
+      type: 'header',
+    };
+    const indented = formatLines2(val);
+    const dedented = formatLines0(val);
+
+    expect(dedentLines(indented)).toEqual(dedented);
+  });
+
+  test('markup with components as props', () => {
+    // https://daveceddia.com/pluggable-slots-in-react-components/
+    const val = {
+      $$typeof,
+      children: null,
+      props: {
+        content: {
+          $$typeof,
+          children: ['main content here'],
+          type: 'Content',
+        },
+        sidebar: {
+          $$typeof,
+          children: null,
+          props: {
+            user: '0123456789abcdef',
+          },
+          type: 'UserStats',
+        },
+      },
+      type: 'Body',
+    };
+    const indented = formatLines2(val);
+    const dedented = formatLines0(val);
+
+    expect(dedentLines(indented)).toEqual(dedented);
+  });
+});
+
+describe('dedentLines null', () => {
+  test.each([
+    ['object key multi-line', {'multi\nline\nkey': false}],
+    ['object value multi-line', {key: 'multi\nline\nvalue'}],
+    ['object key and value multi-line', {'multi\nline': '\nleading nl'}],
+  ])('%s', (name, val) => {
+    expect(dedentLines(formatLines2(val))).toEqual(null);
+  });
+
+  test('markup prop multi-line', () => {
+    const val = {
+      $$typeof,
+      children: null,
+      props: {
+        alt: 'trailing newline\n',
+        src: 'jest.svg',
+      },
+      type: 'img',
+    };
+    const indented = formatLines2(val);
+
+    expect(dedentLines(indented)).toEqual(null);
+  });
+
+  test('markup prop component with multi-line text', () => {
+    // https://daveceddia.com/pluggable-slots-in-react-components/
+    const val = {
+      $$typeof,
+      children: [
+        {
+          $$typeof,
+          children: null,
+          props: {
+            content: {
+              $$typeof,
+              children: ['\n'],
+              type: 'Content',
+            },
+            sidebar: {
+              $$typeof,
+              children: null,
+              props: {
+                user: '0123456789abcdef',
+              },
+              type: 'UserStats',
+            },
+          },
+          type: 'Body',
+        },
+      ],
+      type: 'main',
+    };
+    const indented = formatLines2(val);
+
+    expect(dedentLines(indented)).toEqual(null);
+  });
+
+  test('markup text multi-line', () => {
+    const text = [
+      'for (key in foo) {',
+      '  if (Object.prototype.hasOwnProperty.call(foo, key)) {',
+      '    doSomething(key);',
+      '  }',
+      '}',
+    ].join('\n');
+    const val = {
+      $$typeof,
+      children: [
+        {
+          $$typeof,
+          children: [text],
+          props: {
+            className: 'language-js',
+          },
+          type: 'pre',
+        },
+      ],
+      type: 'div',
+    };
+    const indented = formatLines2(val);
+
+    expect(dedentLines(indented)).toEqual(null);
+  });
+
+  test('markup text multiple lines', () => {
+    const lines = [
+      'for (key in foo) {',
+      '  if (Object.prototype.hasOwnProperty.call(foo, key)) {',
+      '    doSomething(key);',
+      '  }',
+      '}',
+    ];
+    const val = {
+      $$typeof,
+      children: [
+        {
+          $$typeof,
+          children: lines,
+          props: {
+            className: 'language-js',
+          },
+          type: 'pre',
+        },
+      ],
+      type: 'div',
+    };
+    const indented = formatLines2(val);
+
+    expect(dedentLines(indented)).toEqual(null);
+  });
+
+  test('markup unclosed self-closing start tag', () => {
+    const indented = ['<img', '  alt="Jest logo"', '  src="jest.svg"'];
+
+    expect(dedentLines(indented)).toEqual(null);
+  });
+
+  test('markup unclosed because no end tag', () => {
+    const indented = ['<p>', '  Delightful JavaScript testing'];
+
+    expect(dedentLines(indented)).toEqual(null);
+  });
+});