fix(expect): show diff on toContain/toMatch assertion error

docs/api/expect.md

@@ -544,10 +544,6 @@ test('top fruits', () => {
 })
 ```
 
-::: tip
-If the value in the error message is too truncated, you can increase [chaiConfig.truncateThreshold](/config/#chaiconfig-truncatethreshold) in your config file.
-:::
-
 ## toMatchObject
 
 - **Type:** `(received: object | array) => Awaitable<void>`

packages/expect/src/jest-expect.ts

@@ -170,10 +170,16 @@ export const JestChaiExpect: ChaiPlugin = (chai, utils) => {
     )
   })
   def('toMatch', function (expected: string | RegExp) {
-    if (typeof expected === 'string')
-      return this.include(expected)
-    else
-      return this.match(expected)
+    const actual = this._obj as string
+    return this.assert(
+      typeof expected === 'string'
+        ? actual.includes(expected)
+        : actual.match(expected),
+      `expected #{this} to match #{exp}`,
+      `expected #{this} not to match #{exp}`,
+      expected,
+      actual,
+    )
   })
   def('toContain', function (item) {
     const actual = this._obj as Iterable<unknown> | string | Node | DOMTokenList
@@ -203,6 +209,16 @@ export const JestChaiExpect: ChaiPlugin = (chai, utils) => {
         actual.value,
       )
     }
+    // handle simple case on our own using `this.assert` to include diff in error message
+    if (typeof actual === 'string' && typeof item === 'string') {
+      return this.assert(
+        actual.includes(item),
+        `expected #{this} to contain #{exp}`,
+        `expected #{this} not to contain #{exp}`,
+        item,
+        actual,
+      )
+    }
     // make "actual" indexable to have compatibility with jest
     if (actual != null && typeof actual !== 'string')
       utils.flag(this, 'object', Array.from(actual as Iterable<unknown>))

test/core/test/__snapshots__/jest-expect.test.ts.snap

@@ -310,3 +310,42 @@ exports[`asymmetric matcher error 23`] = `
   "message": "expected error to be instance of MyError1",
 }
 `;
+
+exports[`toMatch/toContain diff 1`] = `
+{
+  "actual": "hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello",
+  "diff": "- Expected
++ Received
+
+- world
++ hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello",
+  "expected": "world",
+  "message": "expected 'hellohellohellohellohellohellohellohe…' to contain 'world'",
+}
+`;
+
+exports[`toMatch/toContain diff 2`] = `
+{
+  "actual": "hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello",
+  "diff": "- Expected
++ Received
+
+- world
++ hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello",
+  "expected": "world",
+  "message": "expected 'hellohellohellohellohellohellohellohe…' to match 'world'",
+}
+`;
+
+exports[`toMatch/toContain diff 3`] = `
+{
+  "actual": "hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello",
+  "diff": "- Expected: 
+/world/
+
++ Received: 
+"hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello"",
+  "expected": "/world/",
+  "message": "expected 'hellohellohellohellohellohellohellohe…' to match /world/",
+}
+`;

test/core/test/jest-expect.test.ts

@@ -993,25 +993,26 @@ it('toHaveProperty error diff', () => {
   `)
 })
 
+function snapshotError(f: () => unknown) {
+  try {
+    f()
+  }
+  catch (error) {
+    const e = processError(error)
+    expect({
+      message: e.message,
+      diff: e.diff,
+      expected: e.expected,
+      actual: e.actual,
+    }).toMatchSnapshot()
+    return
+  }
+  expect.unreachable()
+}
+
 it('asymmetric matcher error', () => {
   setupColors(getDefaultColors())
 
-  function snapshotError(f: () => unknown) {
-    try {
-      f()
-      return expect.unreachable()
-    }
-    catch (error) {
-      const e = processError(error)
-      expect({
-        message: e.message,
-        diff: e.diff,
-        expected: e.expected,
-        actual: e.actual,
-      }).toMatchSnapshot()
-    }
-  }
-
   expect.extend({
     stringContainingCustom(received: unknown, other: string) {
       return {
@@ -1084,4 +1085,10 @@ it('asymmetric matcher error', () => {
   }).toThrow(MyError1))
 })
 
+it('toMatch/toContain diff', () => {
+  snapshotError(() => expect('hello'.repeat(20)).toContain('world'))
+  snapshotError(() => expect('hello'.repeat(20)).toMatch('world'))
+  snapshotError(() => expect('hello'.repeat(20)).toMatch(/world/))
+})
+
 it('timeout', () => new Promise(resolve => setTimeout(resolve, 500)))