chore: improve actual/expected

packages/expect/src/jest-expect.ts

@@ -181,11 +181,13 @@ export const JestChaiExpect: ChaiPlugin = (chai, utils) => {
 
     if (typeof DOMTokenList !== 'undefined' && actual instanceof DOMTokenList) {
       assertTypes(item, 'class name', ['string'])
+      const isNot = utils.flag(this, 'negate') as boolean
+      const expectedClassList = isNot ? actual.value.replace(item, '').trim() : `${actual.value} ${item}`
       return this.assert(
         actual.contains(item),
         `expected "${actual.value}" to contain "${item}"`,
         `expected "${actual.value}" not to contain "${item}"`,
-        `${actual.value} ${item}`,
+        expectedClassList,
         actual.value,
       )
     }

test/core/test/environments/jsdom.spec.ts

@@ -1,6 +1,12 @@
 // @vitest-environment jsdom
 
-import { expect, test } from 'vitest'
+import { createColors, getDefaultColors, setupColors } from '@vitest/utils'
+import { processError } from '@vitest/utils/error'
+import { afterEach, expect, test } from 'vitest'
+
+afterEach(() => {
+  setupColors(createColors(true))
+})
 
 const nodeMajor = Number(process.version.slice(1).split('.')[0])
 
@@ -44,4 +50,34 @@ test('toContain correctly handles DOM nodes', () => {
   expect(() => {
     expect(wrapper.classList).toContain(2)
   }).toThrowErrorMatchingInlineSnapshot(`"class name value must be string, received "number""`)
+
+  setupColors(getDefaultColors())
+
+  try {
+    expect(wrapper.classList).toContain('flex-row')
+    expect.unreachable()
+  }
+  catch (err: any) {
+    expect(processError(err).diff).toMatchInlineSnapshot(`
+      "- Expected
+      + Received
+
+      - flex flex-col flex-row
+      + flex flex-col"
+    `)
+  }
+
+  try {
+    expect(wrapper.classList).not.toContain('flex')
+    expect.unreachable()
+  }
+  catch (err: any) {
+    expect(processError(err).diff).toMatchInlineSnapshot(`
+      "- Expected
+      + Received
+
+      - flex-col
+      + flex flex-col"
+    `)
+  }
 })