Highlight only last of odd length leading spaces in jest-diff

packages/jest-diff/src/__tests__/__snapshots__/diff.test.js.snap

@@ -183,4 +183,19 @@ exports[`falls back to not call toJSON if objects look identical 1`] = `
 <dim>  }</>"
 `;
 
+exports[`highlight only the last in odd length of leading spaces (expanded) 1`] = `
+"<green>- Expected</>
+<red>+ Received</>
+
+<dim>  <pre></>
+<green>-   attributes.reduce(function (props, attribute) {</>
+<green>-   <inverse> </>props[attribute.name] = attribute.value;</>
+<red>+   attributes.reduce((props, {name, value}) =&gt; {</>
+<red>+   props[name] = value;</>
+<dim>    return props;</>
+<green>- <inverse> </>}, {});</>
+<red>+ }, {});</>
+<dim>  </pre></>"
+`;
+
 exports[`prints a fallback message if two objects truly look identical 1`] = `"<dim>Compared values have no visual difference.</>"`;

packages/jest-diff/src/__tests__/diff.test.js

@@ -761,6 +761,40 @@ describe('background color of spaces', () => {
   });
 });
 
+describe('highlight only the last in odd length of leading spaces', () => {
+  const pre5 = {
+    $$typeof: elementSymbol,
+    props: {
+      children: [
+        'attributes.reduce(function (props, attribute) {',
+        '   props[attribute.name] = attribute.value;', // 3 leading spaces
+        '  return props;', // 2 leading spaces
+        ' }, {});', // 1 leading space
+      ].join('\n'),
+    },
+    type: 'pre',
+  };
+  const pre6 = {
+    $$typeof: elementSymbol,
+    props: {
+      children: [
+        'attributes.reduce((props, {name, value}) => {',
+        '  props[name] = value;', // from 3 to 2 leading spaces
+        '  return props;', // unchanged 2 leading spaces
+        '}, {});', // from 1 to 0 leading spaces
+      ].join('\n'),
+    },
+    type: 'pre',
+  };
+  const received = diff(pre5, pre6, expanded);
+  test('(expanded)', () => {
+    expect(received).toMatchSnapshot();
+  });
+  test('(unexpanded)', () => {
+    expect(diff(pre5, pre6, unexpanded)).toBe(received);
+  });
+});
+
 test('collapses big diffs to patch format', () => {
   const result = diff(
     {test: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},

packages/jest-diff/src/diff_strings.js

@@ -76,7 +76,12 @@ const highlightLeadingTrailingSpaces = (
   line: string,
   bgColor: Function,
 ): string =>
-  highlightTrailingSpaces(line.replace(/^\s+/, bgColor('$&')), bgColor);
+  // If line consists of ALL spaces: highlight all of them.
+  highlightTrailingSpaces(line, bgColor).replace(
+    // If line has an ODD length of leading spaces: highlight only the LAST.
+    /^(\s\s)*(\s)(?=[^\s])/,
+    '$1' + bgColor('$2'),
+  );
 
 const getAnnotation = (options: ?DiffOptions): string =>
   chalk.green('- ' + ((options && options.aAnnotation) || 'Expected')) +