expect: Display expectedDiff more carefully in toBeCloseTo

CHANGELOG.md

@@ -23,6 +23,7 @@
 - `[jest-environment-jsdom]` Re-declare global prototype of JSDOMEnvironment ([#8352](https://github.com/facebook/jest/pull/8352))
 - `[jest-snapshot]` Handle arrays when merging snapshots ([#7089](https://github.com/facebook/jest/pull/7089))
 - `[expect]` Extract names of async and generator functions ([#8362](https://github.com/facebook/jest/pull/8362))
+- `[expect]` Display expectedDiff more carefully in toBeCloseTo ([#8389](https://github.com/facebook/jest/pull/8389))
 
 ### Chore & Maintenance
 

packages/expect/src/__tests__/__snapshots__/matchers.test.js.snap

@@ -463,6 +463,28 @@ Expected difference: < <green>0.005</>
 Received difference:   <red>Infinity</>"
 `;
 
+exports[`.toBeCloseTo() {pass: false} expect(3.141592e-7)toBeCloseTo( 3e-7, 8) 1`] = `
+"<dim>expect(</><red>received</><dim>).</>toBeCloseTo<dim>(</><green>expected</><dim>, </><green>precision</><dim>)</>
+
+Expected: <green>3e-7</>
+Received: <red>3.141592e-7</>
+
+Expected precision:    <green>8</>
+Expected difference: < <green>5e-9</>
+Received difference:   <red>1.4159200000000025e-8</>"
+`;
+
+exports[`.toBeCloseTo() {pass: false} expect(56789)toBeCloseTo( 51234, -4) 1`] = `
+"<dim>expect(</><red>received</><dim>).</>toBeCloseTo<dim>(</><green>expected</><dim>, </><green>precision</><dim>)</>
+
+Expected: <green>51234</>
+Received: <red>56789</>
+
+Expected precision:    <green>-4</>
+Expected difference: < <green>5000</>
+Received difference:   <red>5555</>"
+`;
+
 exports[`.toBeCloseTo() {pass: false} expect(Infinity)toBeCloseTo( -Infinity) 1`] = `
 "<dim>expect(</><red>received</><dim>).</>toBeCloseTo<dim>(</><green>expected</><dim>)</>
 
@@ -594,6 +616,17 @@ Expected difference: not < <green>0.5</>
 Received difference:       <red>0.1</>"
 `;
 
+exports[`.toBeCloseTo() accepts an optional precision argument: [2.0000002, 2, 5] 1`] = `
+"<dim>expect(</><red>received</><dim>).</>not<dim>.</>toBeCloseTo<dim>(</><green>expected</><dim>, </><green>precision</><dim>)</>
+
+Expected: not <green>2</>
+Received:     <red>2.0000002</>
+
+Expected precision:        <green>5</>
+Expected difference: not < <green>5e-6</>
+Received difference:       <red>2.0000000011677344e-7</>"
+`;
+
 exports[`.toBeCloseTo() throws: [0, 0.01] 1`] = `
 "<dim>expect(</><red>received</><dim>).</>toBeCloseTo<dim>(</><green>expected</><dim>)</>
 

packages/expect/src/__tests__/matchers.test.js

@@ -1108,16 +1108,28 @@ describe('.toBeCloseTo()', () => {
     },
   );
 
-  [[0, 0.1, 0], [0, 0.0001, 3], [0, 0.000004, 5]].forEach(([n1, n2, p]) => {
-    it(`accepts an optional precision argument: [${n1}, ${n2}, ${p}]`, () => {
-      jestExpect(n1).toBeCloseTo(n2, p);
+  [[3.141592e-7, 3e-7, 8], [56789, 51234, -4]].forEach(([n1, n2, p]) => {
+    it(`{pass: false} expect(${n1})toBeCloseTo( ${n2}, ${p})`, () => {
+      jestExpect(n1).not.toBeCloseTo(n2, p);
 
       expect(() =>
-        jestExpect(n1).not.toBeCloseTo(n2, p),
+        jestExpect(n1).toBeCloseTo(n2, p),
       ).toThrowErrorMatchingSnapshot();
     });
   });
 
+  [[0, 0.1, 0], [0, 0.0001, 3], [0, 0.000004, 5], [2.0000002, 2, 5]].forEach(
+    ([n1, n2, p]) => {
+      it(`accepts an optional precision argument: [${n1}, ${n2}, ${p}]`, () => {
+        jestExpect(n1).toBeCloseTo(n2, p);
+
+        expect(() =>
+          jestExpect(n1).not.toBeCloseTo(n2, p),
+        ).toThrowErrorMatchingSnapshot();
+      });
+    },
+  );
+
   describe('throws: Matcher error', () => {
     test('promise empty isNot false received', () => {
       const precision = 3;

packages/expect/src/matchers.ts

@@ -26,6 +26,7 @@ import {
 } from 'jest-matcher-utils';
 import {MatchersObject, MatcherState} from './types';
 import {
+  printCloseTo,
   printDiffOrStringify,
   printExpectedConstructorName,
   printExpectedConstructorNameNot,
@@ -126,8 +127,9 @@ const matchers: MatchersObject = {
   ) {
     const matcherName = 'toBeCloseTo';
     const secondArgument = arguments.length === 3 ? 'precision' : undefined;
+    const isNot = this.isNot;
     const options: MatcherHintOptions = {
-      isNot: this.isNot,
+      isNot,
       promise: this.promise,
       secondArgument,
     };
@@ -156,18 +158,14 @@ const matchers: MatchersObject = {
             ? ''
             : `Received:     ${printReceived(received)}\n` +
               '\n' +
-              `Expected precision:        ${printExpected(precision)}\n` +
-              `Expected difference: not < ${printExpected(expectedDiff)}\n` +
-              `Received difference:       ${printReceived(receivedDiff)}`)
+              printCloseTo(receivedDiff, expectedDiff, precision, isNot))
       : () =>
           matcherHint(matcherName, undefined, undefined, options) +
           '\n\n' +
           `Expected: ${printExpected(expected)}\n` +
           `Received: ${printReceived(received)}\n` +
           '\n' +
-          `Expected precision:    ${printExpected(precision)}\n` +
-          `Expected difference: < ${printExpected(expectedDiff)}\n` +
-          `Received difference:   ${printReceived(receivedDiff)}`;
+          printCloseTo(receivedDiff, expectedDiff, precision, isNot);
 
     return {message, pass};
   },

packages/expect/src/print.ts

@@ -66,6 +66,32 @@ export const printReceivedArrayContainExpectedItem = (
       ']',
   );
 
+export const printCloseTo = (
+  receivedDiff: number,
+  expectedDiff: number,
+  precision: number,
+  isNot: boolean,
+): string => {
+  const receivedDiffString = stringify(receivedDiff);
+  const expectedDiffString = receivedDiffString.includes('e')
+    ? expectedDiff.toExponential(0)
+    : 0 <= precision && precision <= 20
+    ? expectedDiff.toFixed(precision + 1)
+    : stringify(expectedDiff);
+
+  return (
+    `Expected precision:  ${isNot ? '    ' : ''}  ${printExpected(
+      precision,
+    )}\n` +
+    `Expected difference: ${isNot ? 'not ' : ''}< ${EXPECTED_COLOR(
+      expectedDiffString,
+    )}\n` +
+    `Received difference: ${isNot ? '    ' : ''}  ${RECEIVED_COLOR(
+      receivedDiffString,
+    )}`
+  );
+};
+
 const shouldPrintDiff = (expected: unknown, received: unknown): boolean => {
   const expectedType = getType(expected);
   const receivedType = getType(received);