expect: Highlight substring differences when matcher fails, part 1

.eslintignore

@@ -4,6 +4,7 @@ bin/
 flow-typed/**
 packages/*/build/**
 packages/*/build-es5/**
+packages/expect/src/cleanupSemantic.js
 website/blog
 website/build
 website/node_modules

.prettierignore

@@ -1,3 +1,4 @@
 fixtures/failing-jsons/
+packages/expect/src/cleanupSemantic.js
 packages/jest-config/src/__tests__/jest-preset.json
 packages/pretty-format/perf/world.geo.json

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### Features
 
+- `[expect]` Improve report when matcher fails, part 20 ([#8448](https://github.com/facebook/jest/pull/8448))
+
 ### Fixes
 
 - `[babel-plugin-jest-hoist]` Expand list of whitelisted globals in global mocks ([#8429](https://github.com/facebook/jest/pull/8429)

packages/expect/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@jest/types": "^24.8.0",
     "ansi-styles": "^3.2.0",
+    "diff-sequences": "^24.3.0",
     "jest-get-type": "^24.8.0",
     "jest-matcher-utils": "^24.8.0",
     "jest-message-util": "^24.8.0",

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

@@ -303,6 +303,13 @@ string" 1`] = `
 <dim>  string</>"
 `;
 
+exports[`.toBe() fails for: "painless JavaScript testing" and "delightful JavaScript testing" 1`] = `
+"<dim>expect(</><red>received</><dim>).</>toBe<dim>(</><green>expected</><dim>) // Object.is equality</>
+
+Expected: <green>\\"<inverse>delightful</> JavaScript testing\\"</>
+Received: <red>\\"<inverse>painless</> JavaScript testing\\"</>"
+`;
+
 exports[`.toBe() fails for: "with 
 trailing space" and "without trailing space" 1`] = `
 "<dim>expect(</><red>received</><dim>).</>toBe<dim>(</><green>expected</><dim>) // Object.is equality</>
@@ -1922,6 +1929,13 @@ exports[`.toContain(), .toContainEqual() error cases for toContainEqual 1`] = `
 Received has value: <red>null</>"
 `;
 
+exports[`.toEqual() {pass: false} expect("1 234,57 $").toEqual("1 234,57 $") 1`] = `
+"<dim>expect(</><red>received</><dim>).</>toEqual<dim>(</><green>expected</><dim>) // deep equality</>
+
+Expected: <green>\\"1<inverse> </>234,57<inverse> </>$\\"</>
+Received: <red>\\"1<inverse> </>234,57<inverse> </>$\\"</>"
+`;
+
 exports[`.toEqual() {pass: false} expect("Eve").toEqual({"asymmetricMatch": [Function asymmetricMatch]}) 1`] = `
 "<dim>expect(</><red>received</><dim>).</>toEqual<dim>(</><green>expected</><dim>) // deep equality</>
 
@@ -3057,6 +3071,15 @@ Expected value: <green>2</>
 Received value: <red>1</>"
 `;
 
+exports[`.toHaveProperty() {pass: false} expect({"children": ["\\"That cartoon\\""], "props": null, "type": "p"}).toHaveProperty('children,0', "\\"That cat cartoon\\"") 1`] = `
+"<dim>expect(</><red>received</><dim>).</>toHaveProperty<dim>(</><green>path</><dim>, </><green>value</><dim>)</>
+
+Expected path: <green>[\\"children\\", 0]</>
+
+Expected value: <green>\\"\\\\\\"That <inverse>cat </>cartoon\\\\\\"\\"</>
+Received value: <red>\\"\\\\\\"That cartoon\\\\\\"\\"</>"
+`;
+
 exports[`.toHaveProperty() {pass: false} expect({"key": 1}).toHaveProperty('not') 1`] = `
 "<dim>expect(</><red>received</><dim>).</>toHaveProperty<dim>(</><green>path</><dim>)</>
 
@@ -3497,6 +3520,13 @@ Expected substring: <green>\\"foo\\"</>
 Received string:    <red>\\"bar\\"</>"
 `;
 
+exports[`.toStrictEqual() displays substring diff 1`] = `
+"<dim>expect(</><red>received</><dim>).</>toStrictEqual<dim>(</><green>expected</><dim>) // deep equality</>
+
+Expected: <green>\\"<inverse>Another caveat is that</> Jest will not typecheck your tests.\\"</>
+Received: <red>\\"<inverse>Because TypeScript support in Babel is just transpilation,</> Jest will not type<inverse>-</>check your tests<inverse> as they run</>.\\"</>"
+`;
+
 exports[`.toStrictEqual() matches the expected snapshot when it fails 1`] = `
 "<dim>expect(</><red>received</><dim>).</>toStrictEqual<dim>(</><green>expected</><dim>) // deep equality</>
 

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

@@ -215,6 +215,7 @@ describe('.toBe()', () => {
     [Symbol('received'), Symbol('expected')],
     [new Error('received'), new Error('expected')],
     ['abc', 'cde'],
+    ['painless JavaScript testing', 'delightful JavaScript testing'],
     ['with \ntrailing space', 'without trailing space'],
     ['four\n4\nline\nstring', '3\nline\nstring'],
     [[], []],
@@ -318,6 +319,16 @@ describe('.toStrictEqual()', () => {
     ).toThrowErrorMatchingSnapshot();
   });
 
+  it('displays substring diff', () => {
+    const expected =
+      'Another caveat is that Jest will not typecheck your tests.';
+    const received =
+      'Because TypeScript support in Babel is just transpilation, Jest will not type-check your tests as they run.';
+    expect(() =>
+      jestExpect(received).toStrictEqual(expected),
+    ).toThrowErrorMatchingSnapshot();
+  });
+
   it('does not pass for different types', () => {
     expect({
       test: new TestClassA(1, 2),
@@ -358,6 +369,7 @@ describe('.toEqual()', () => {
     [{a: 1}, {a: 2}],
     [{a: 5}, {b: 6}],
     ['banana', 'apple'],
+    ['1\u{00A0}234,57\u{00A0}$', '1 234,57 $'], // issues/6881
     [null, undefined],
     [[1], [2]],
     [[1, 2], [2, 1]],
@@ -1348,6 +1360,14 @@ describe('.toHaveProperty()', () => {
   const memoized = function() {};
   memoized.memo = [];
 
+  const receivedDiff = {
+    children: ['"That cartoon"'],
+    props: null,
+    type: 'p',
+  };
+  const pathDiff = ['children', 0];
+  const valueDiff = '"That cat cartoon"';
+
   [
     [{a: {b: {c: {d: 1}}}}, 'a.b.c.d', 1],
     [{a: {b: {c: {d: 1}}}}, ['a', 'b', 'c', 'd'], 1],
@@ -1384,6 +1404,7 @@ describe('.toHaveProperty()', () => {
     [{a: {b: {c: {d: 1}}}}, 'a.b.c.d', 2],
     [{'a.b.c.d': 1}, 'a.b.c.d', 2],
     [{'a.b.c.d': 1}, ['a.b.c.d'], 2],
+    [receivedDiff, pathDiff, valueDiff],
     [{a: {b: {c: {d: 1}}}}, ['a', 'b', 'c', 'd'], 2],
     [{a: {b: {c: {}}}}, 'a.b.c.d', 1],
     [{a: 1}, 'a.b.c.d', 5],

packages/expect/src/cleanupSemantic.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+export declare const DIFF_COMMON = 0;
+export declare const DIFF_DELETE = -1;
+export declare const DIFF_INSERT = 1;
+
+type DIFF_OP = 0 | -1 | 1;
+
+export declare class Diff {
+  constructor(op: DIFF_OP, substring: string);
+  // properties have indexes like an array tuple
+  0: DIFF_OP;
+  1: string;
+}
+
+export declare const cleanupSemantic: (diffs: Array<Diff>) => void;