fix(jest-matcher-utils): show byte order mark character in diff

CHANGELOG.md

@@ -38,6 +38,7 @@
 - `[jest-environment-jsdom]` Stop setting `document` to `null` on teardown ([#13972](https://github.com/facebook/jest/pull/13972))
 - `[@jest/expect-utils]` Update `toStrictEqual()` to be able to check `jest.fn().mock.calls` ([#13960](https://github.com/facebook/jest/pull/13960))
 - `[@jest/test-result]` Allow `TestResultsProcessor` type to return a Promise ([#13950](https://github.com/facebook/jest/pull/13950))
+- `[jest-matcher-utils]` Highlights the [byte order mark character](https://en.wikipedia.org/wiki/Byte_order_mark) in diff ([#13997](https://github.com/facebook/jest/pull/13997))
 
 ### Chore & Maintenance
 

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

@@ -463,6 +463,13 @@ Expected: <g>false</>
 Received: <r>true</>
 `;
 
+exports[`.toBe() should highlight byte order mark character in diff 1`] = `
+<d>expect(</><r>received</><d>).</>toBe<d>(</><g>expected</><d>) // Object.is equality</>
+
+Expected: <g>"Test content"</>
+Received: <r>"<i> </i>Test content"</>
+`;
+
 exports[`.toBeCloseTo {pass: false} expect(-Infinity).toBeCloseTo(-1.23) 1`] = `
 <d>expect(</><r>received</><d>).</>toBeCloseTo<d>(</><g>expected</><d>)</>
 

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

@@ -292,6 +292,13 @@ describe('.toBe()', () => {
       );
     }
   });
+
+  it('should highlight byte order mark character in diff', () => {
+    // issue 10584
+    const a = '\uFEFFTest content';
+    const b = 'Test content';
+    expect(() => jestExpect(a).toBe(b)).toThrowErrorMatchingSnapshot();
+  });
 });
 
 describe('.toStrictEqual()', () => {

packages/jest-matcher-utils/src/index.ts

@@ -67,6 +67,7 @@ export const DIM_COLOR = chalk.dim;
 
 const MULTILINE_REGEXP = /\n/;
 const SPACE_SYMBOL = '\u{00B7}'; // middle dot
+const NO_BREAK_SPACE_SYMBOL = '\u{00A0}';
 
 const NUMBERS = [
   'zero',
@@ -131,10 +132,19 @@ export const highlightTrailingWhitespace = (text: string): string =>
 const replaceTrailingSpaces = (text: string): string =>
   text.replace(/\s+$/gm, spaces => SPACE_SYMBOL.repeat(spaces.length));
 
+// Replaces the byte order mark character with the no break
+// space symbol to highlight string differences.
+const replaceByteOrderMarks = (text: string): string =>
+  text.replace(/\uFEFF/gm, NO_BREAK_SPACE_SYMBOL);
+
 export const printReceived = (object: unknown): string =>
-  RECEIVED_COLOR(replaceTrailingSpaces(stringify(object)));
+  RECEIVED_COLOR(
+    replaceByteOrderMarks(replaceTrailingSpaces(stringify(object))),
+  );
 export const printExpected = (value: unknown): string =>
-  EXPECTED_COLOR(replaceTrailingSpaces(stringify(value)));
+  EXPECTED_COLOR(
+    replaceByteOrderMarks(replaceTrailingSpaces(stringify(value))),
+  );
 
 export function printWithType<T>(
   name: string,