From 73dd4ab54a4412c649e0c584e8fb2913987b3730 Mon Sep 17 00:00:00 2001
From: Vladimir <sleuths.slews0s@icloud.com>
Date: Mon, 19 Jun 2023 18:38:04 +0200
Subject: [PATCH] fix: show diff correctly (#3620)

---
 packages/utils/src/diff/index.ts                |  6 ++++++
 packages/utils/src/error.ts                     |  2 +-
 test/core/test/jest-expect.test.ts              | 17 ++++++++++++++++-
 .../tests/__snapshots__/html.test.ts.snap       |  8 ++++----
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/utils/src/diff/index.ts b/packages/utils/src/diff/index.ts
index e65b776473cf..b81d0210569c 100644
--- a/packages/utils/src/diff/index.ts
+++ b/packages/utils/src/diff/index.ts
@@ -60,6 +60,12 @@ const FALLBACK_FORMAT_OPTIONS = {
 // Generate a string that will highlight the difference between two values
 // with green and red. (similar to how github does code diffing)
 
+/**
+ * @param a Expected value
+ * @param b Received value
+ * @param options Diff options
+ * @returns
+ */
 export function diff(a: any, b: any, options?: DiffOptions): string | null {
   if (Object.is(a, b))
     return ''
diff --git a/packages/utils/src/error.ts b/packages/utils/src/error.ts
index 536aba4f7abe..5048b8dceea3 100644
--- a/packages/utils/src/error.ts
+++ b/packages/utils/src/error.ts
@@ -97,7 +97,7 @@ export function processError(err: any) {
     err.nameStr = String(err.name)
 
   if (err.showDiff || (err.showDiff === undefined && err.expected !== undefined && err.actual !== undefined))
-    err.diff = diff(err.actual, err.expected)
+    err.diff = diff(err.expected, err.actual)
 
   if (typeof err.expected !== 'string')
     err.expected = stringify(err.expected, 10)
diff --git a/test/core/test/jest-expect.test.ts b/test/core/test/jest-expect.test.ts
index 19862611e5d6..1c2dbbcfed1f 100644
--- a/test/core/test/jest-expect.test.ts
+++ b/test/core/test/jest-expect.test.ts
@@ -1,7 +1,9 @@
 /* eslint-disable no-sparse-arrays */
 import { AssertionError } from 'node:assert'
 import { describe, expect, it, vi } from 'vitest'
-import { generateToBeMessage } from '@vitest/expect'
+import { generateToBeMessage, setupColors } from '@vitest/expect'
+import { processError } from '@vitest/utils/error'
+import { getDefaultColors } from '@vitest/utils'
 
 class TestError extends Error {}
 
@@ -753,4 +755,17 @@ it('compatible with jest', () => {
   expect(state.assertionCalls).toBe(2)
 })
 
+it('correctly prints diff', () => {
+  try {
+    expect({ a: 1 }).toEqual({ a: 2 })
+    expect.unreachable()
+  }
+  catch (err) {
+    setupColors(getDefaultColors())
+    const error = processError(err)
+    expect(error.diff).toContain('-   "a": 2')
+    expect(error.diff).toContain('+   "a": 1')
+  }
+})
+
 it('timeout', () => new Promise(resolve => setTimeout(resolve, 500)))
diff --git a/test/reporters/tests/__snapshots__/html.test.ts.snap b/test/reporters/tests/__snapshots__/html.test.ts.snap
index dfe9a67035f6..7541b47d69a4 100644
--- a/test/reporters/tests/__snapshots__/html.test.ts.snap
+++ b/test/reporters/tests/__snapshots__/html.test.ts.snap
@@ -48,8 +48,8 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
               "diff": "- Expected
 + Received
 
-- 2
-+ 1",
+- 1
++ 2",
               "expected": "1",
               "message": "expected 2 to deeply equal 1",
               "name": "AssertionError",
@@ -68,8 +68,8 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
                 "diff": "- Expected
 + Received
 
-- 2
-+ 1",
+- 1
++ 2",
                 "expected": "1",
                 "message": "expected 2 to deeply equal 1",
                 "name": "AssertionError",