chore: Align snapshots in jest-matcher-utils (#8957)

* chore: Align snapshots in jest-matcher-utils

* Use new ConvertAnsi1 plugin in jest-diff and jest-matcher-utils

* Add ConvertAnsi1.ts under plugins in pretty-format

* Delete unneeded .ts file name extension in import statements

* Add alignedAnsiStyleSerializer to test-utils

* Delete ConvertAnsi1 from pretty-format

* Fix prettier lint error

* Add reference to test-utils in tsconfig.json files

packages/jest-diff/src/__tests__/diff.test.ts

@@ -5,10 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ansiRegex = require('ansi-regex');
-import * as style from 'ansi-styles';
 import chalk from 'chalk';
 import stripAnsi from 'strip-ansi';
+import {alignedAnsiStyleSerializer} from '@jest/test-utils';
 
 import diff from '../';
 import {diffStringsUnified} from '../printDiffs';
@@ -46,45 +45,7 @@ const expanded = {expand: true};
 
 const elementSymbol = Symbol.for('react.element');
 
-expect.addSnapshotSerializer({
- serialize(val: string): string {
- return val.replace(ansiRegex(), match => {
- switch (match) {
- case style.inverse.open:
- return '<i>';
- case style.inverse.close:
- return '</i>';
-
- case style.bold.open:
- return '<b>';
- case style.dim.open:
- return '<d>';
- case style.green.open:
- return '<g>';
- case style.red.open:
- return '<r>';
- case style.yellow.open:
- return '<y>';
- case style.bgYellow.open:
- return '<Y>';
-
- case style.bold.close:
- case style.dim.close:
- case style.green.close:
- case style.red.close:
- case style.yellow.close:
- case style.bgYellow.close:
- return '</>';
-
- default:
- return match;
- }
- });
- },
- test(val: any): val is string {
- return typeof val === 'string';
- },
-});
+expect.addSnapshotSerializer(alignedAnsiStyleSerializer);
 
 describe('different types', () => {
  [

packages/jest-diff/tsconfig.json

@@ -7,6 +7,7 @@
  "references": [
  {"path": "../diff-sequences"},
  {"path": "../jest-get-type"},
- {"path": "../pretty-format"}
+ {"path": "../pretty-format"},
+ {"path": "../test-utils"}
  ]
 }

packages/jest-matcher-utils/src/__tests__/__snapshots__/index.test.ts.snap

@@ -1,106 +1,102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`.ensureNoExpected() throws error when expected is not undefined with matcherName 1`] = `
-"<dim>expect(</><red>received</><dim>)[.not].toBeDefined()</>
+exports[`ensureNoExpected() throws error when expected is not undefined with matcherName 1`] = `
+<d>expect(</><r>received</><d>)[.not].toBeDefined()</>
 
-<bold>Matcher error</>: this matcher must not have an expected argument
+<b>Matcher error</>: this matcher must not have an expected argument
 
 Expected has type: object
-Expected has value: <green>{\\"a\\": 1}</>"
+Expected has value: <g>{"a": 1}</>
 `;
 
-exports[`.ensureNoExpected() throws error when expected is not undefined with matcherName and options 1`] = `
-"<dim>expect(</><red>received</><dim>).</>not<dim>.</>toBeDefined<dim>()</>
+exports[`ensureNoExpected() throws error when expected is not undefined with matcherName and options 1`] = `
+<d>expect(</><r>received</><d>).</>not<d>.</>toBeDefined<d>()</>
 
-<bold>Matcher error</>: this matcher must not have an expected argument
+<b>Matcher error</>: this matcher must not have an expected argument
 
 Expected has type: object
-Expected has value: <green>{\\"a\\": 1}</>"
+Expected has value: <g>{"a": 1}</>
 `;
 
-exports[`.ensureNumbers() throws error when expected is not a number (backward compatibility) 1`] = `
-"<dim>expect(</><red>received</><dim>)[.not].toBeCloseTo(</><green>expected</><dim>)</>
+exports[`ensureNumbers() throws error when expected is not a number (backward compatibility) 1`] = `
+<d>expect(</><r>received</><d>)[.not].toBeCloseTo(</><g>expected</><d>)</>
 
-<bold>Matcher error</>: <green>expected</> value must be a number or bigint
+<b>Matcher error</>: <g>expected</> value must be a number or bigint
 
 Expected has type: string
-Expected has value: <green>\\"not_a_number\\"</>"
+Expected has value: <g>"not_a_number"</>
 `;
 
-exports[`.ensureNumbers() throws error when received is not a number (backward compatibility) 1`] = `
-"<dim>expect(</><red>received</><dim>)[.not].toBeCloseTo(</><green>expected</><dim>)</>
+exports[`ensureNumbers() throws error when received is not a number (backward compatibility) 1`] = `
+<d>expect(</><r>received</><d>)[.not].toBeCloseTo(</><g>expected</><d>)</>
 
-<bold>Matcher error</>: <red>received</> value must be a number or bigint
+<b>Matcher error</>: <r>received</> value must be a number or bigint
 
 Received has type: string
-Received has value: <red>\\"not_a_number\\"</>"
+Received has value: <r>"not_a_number"</>
 `;
 
-exports[`.ensureNumbers() with options promise empty isNot false received 1`] = `
-"<dim>expect(</><red>received</><dim>).</>toBeCloseTo<dim>(</><green>expected</><dim>, </><green>precision</><dim>)</>
+exports[`ensureNumbers() with options promise empty isNot false received 1`] = `
+<d>expect(</><r>received</><d>).</>toBeCloseTo<d>(</><g>expected</><d>, </><g>precision</><d>)</>
 
-<bold>Matcher error</>: <red>received</> value must be a number or bigint
+<b>Matcher error</>: <r>received</> value must be a number or bigint
 
 Received has type: string
-Received has value: <red>\\"\\"</>"
+Received has value: <r>""</>
 `;
 
-exports[`.ensureNumbers() with options promise empty isNot true expected 1`] = `
-"<dim>expect(</><red>received</><dim>).</>not<dim>.</>toBeCloseTo<dim>(</><green>expected</><dim>)</>
+exports[`ensureNumbers() with options promise empty isNot true expected 1`] = `
+<d>expect(</><r>received</><d>).</>not<d>.</>toBeCloseTo<d>(</><g>expected</><d>)</>
 
-<bold>Matcher error</>: <green>expected</> value must be a number or bigint
+<b>Matcher error</>: <g>expected</> value must be a number or bigint
 
-Expected has value: <green>undefined</>"
+Expected has value: <g>undefined</>
 `;
 
-exports[`.ensureNumbers() with options promise rejects isNot false expected 1`] = `
-"<dim>expect(</><red>received</><dim>).</>rejects<dim>.</>toBeCloseTo<dim>(</><green>expected</><dim>)</>
+exports[`ensureNumbers() with options promise rejects isNot false expected 1`] = `
+<d>expect(</><r>received</><d>).</>rejects<d>.</>toBeCloseTo<d>(</><g>expected</><d>)</>
 
-<bold>Matcher error</>: <green>expected</> value must be a number or bigint
+<b>Matcher error</>: <g>expected</> value must be a number or bigint
 
 Expected has type: string
-Expected has value: <green>\\"0\\"</>"
+Expected has value: <g>"0"</>
 `;
 
-exports[`.ensureNumbers() with options promise rejects isNot true received 1`] = `
-"<dim>expect(</><red>received</><dim>).</>rejects<dim>.</>not<dim>.</>toBeCloseTo<dim>(</><green>expected</><dim>)</>
+exports[`ensureNumbers() with options promise rejects isNot true received 1`] = `
+<d>expect(</><r>received</><d>).</>rejects<d>.</>not<d>.</>toBeCloseTo<d>(</><g>expected</><d>)</>
 
-<bold>Matcher error</>: <red>received</> value must be a number or bigint
+<b>Matcher error</>: <r>received</> value must be a number or bigint
 
 Received has type: symbol
-Received has value: <red>Symbol(0.1)</>"
+Received has value: <r>Symbol(0.1)</>
 `;
 
-exports[`.ensureNumbers() with options promise resolves isNot false received 1`] = `
-"<dim>expect(</><red>received</><dim>).</>resolves<dim>.</>toBeCloseTo<dim>(</><green>expected</><dim>)</>
+exports[`ensureNumbers() with options promise resolves isNot false received 1`] = `
+<d>expect(</><r>received</><d>).</>resolves<d>.</>toBeCloseTo<d>(</><g>expected</><d>)</>
 
-<bold>Matcher error</>: <red>received</> value must be a number or bigint
+<b>Matcher error</>: <r>received</> value must be a number or bigint
 
 Received has type: boolean
-Received has value: <red>false</>"
+Received has value: <r>false</>
 `;
 
-exports[`.ensureNumbers() with options promise resolves isNot true expected 1`] = `
-"<dim>expect(</><red>received</><dim>).</>resolves<dim>.</>not<dim>.</>toBeCloseTo<dim>(</><green>expected</><dim>)</>
+exports[`ensureNumbers() with options promise resolves isNot true expected 1`] = `
+<d>expect(</><r>received</><d>).</>resolves<d>.</>not<d>.</>toBeCloseTo<d>(</><g>expected</><d>)</>
 
-<bold>Matcher error</>: <green>expected</> value must be a number or bigint
+<b>Matcher error</>: <g>expected</> value must be a number or bigint
 
-Expected has value: <green>null</>"
+Expected has value: <g>null</>
 `;
 
-exports[`.stringify() reduces maxDepth if stringifying very large objects 1`] = `"{\\"a\\": 1, \\"b\\": [Object]}"`;
+exports[`stringify() toJSON errors when comparing two objects 1`] = `
+<d>expect(</><r>received</><d>).</>toEqual<d>(</><g>expected</><d>) // deep equality</>
 
-exports[`.stringify() reduces maxDepth if stringifying very large objects 2`] = `"{\\"a\\": 1, \\"b\\": {\\"0\\": \\"test\\", \\"1\\": \\"test\\", \\"2\\": \\"test\\", \\"3\\": \\"test\\", \\"4\\": \\"test\\", \\"5\\": \\"test\\", \\"6\\": \\"test\\", \\"7\\": \\"test\\", \\"8\\": \\"test\\", \\"9\\": \\"test\\"}}"`;
+<g>- Expected</>
+<r>+ Received</>
 
-exports[`.stringify() toJSON errors when comparing two objects 1`] = `
-"<dim>expect(</><red>received</><dim>).</>toEqual<dim>(</><green>expected</><dim>) // deep equality</>
-
-<green>- Expected</>
-<red>+ Received</>
-
-<dim> Object {</>
-<green>- \\"b\\": 1,</>
-<red>+ \\"a\\": 1,</>
-<dim> \\"toJSON\\": [Function toJSON],</>
-<dim> }</>"
+<d> Object {</>
+<g>- "b": 1,</>
+<r>+ "a": 1,</>
+<d> "toJSON": [Function toJSON],</>
+<d> }</>
 `;

packages/jest-matcher-utils/src/__tests__/__snapshots__/printDiffOrStringify.test.ts.snap

@@ -1,44 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`printDiffOrStringify expected and received are multi line with trailing spaces 1`] = `
-"<green>- Expected</>
-<red>+ Received</>
-
-<green>- <inverse>delete</><bgYellow> </></>
-<red>+ <inverse>insert</><bgYellow> </></>
-<green>- common <inverse>expect</>ed common</>
-<red>+ common <inverse>receiv</>ed common</>
-<green>- <inverse>prev</><bgYellow> </></>
-<red>+ <inverse>next</><bgYellow> </></>"
+<g>- Expected</>
+<r>+ Received</>
+
+<g>- <i>delete</i><Y> </></>
+<r>+ <i>insert</i><Y> </></>
+<g>- common <i>expect</i>ed common</>
+<r>+ common <i>receiv</i>ed common</>
+<g>- <i>prev</i><Y> </></>
+<r>+ <i>next</i><Y> </></>
 `;
 
 exports[`printDiffOrStringify expected and received are single line with multiple changes 1`] = `
-"Expected: <green>\\"<inverse>delete</> common <inverse>expect</>ed common <inverse>prev</>\\"</>
-Received: <red>\\"<inverse>insert</> common <inverse>receiv</>ed common <inverse>next</>\\"</>"
+Expected: <g>"<i>delete</i> common <i>expect</i>ed common <i>prev</i>"</>
+Received: <r>"<i>insert</i> common <i>receiv</i>ed common <i>next</i>"</>
 `;
 
 exports[`printDiffOrStringify expected is empty and received is single line 1`] = `
-"Expected: <green>\\"\\"</>
-Received: <red>\\"single line\\"</>"
+Expected: <g>""</>
+Received: <r>"single line"</>
 `;
 
 exports[`printDiffOrStringify expected is multi line and received is empty 1`] = `
-"Expected: <green>\\"multi</>
-<green>line\\"</>
-Received: <red>\\"\\"</>"
+Expected: <g>"multi</>
+<g>line"</>
+Received: <r>""</>
 `;
 
 exports[`printDiffOrStringify has no common after clean up chaff multiline 1`] = `
-"<green>- Expected</>
-<red>+ Received</>
+<g>- Expected</>
+<r>+ Received</>
 
-<green>- delete</>
-<green>- two</>
-<red>+ insert</>
-<red>+ 2</>"
+<g>- delete</>
+<g>- two</>
+<r>+ insert</>
+<r>+ 2</>
 `;
 
 exports[`printDiffOrStringify has no common after clean up chaff one-line 1`] = `
-"Expected: <green>\\"delete\\"</>
-Received: <red>\\"insert\\"</>"
+Expected: <g>"delete"</>
+Received: <r>"insert"</>
 `;

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

@@ -7,6 +7,8 @@
  */
 
 import chalk from 'chalk';
+import prettyFormat = require('pretty-format');
+import {alignedAnsiStyleSerializer} from '@jest/test-utils';
 import {
  MatcherHintOptions,
  diff,
@@ -21,7 +23,9 @@ import {
 /* global BigInt */
 const isBigIntDefined = typeof BigInt === 'function';
 
-describe('.stringify()', () => {
+expect.addSnapshotSerializer(alignedAnsiStyleSerializer);
+
+describe('stringify()', () => {
  [
  [[], '[]'],
  [{}, '{}'],
@@ -93,12 +97,12 @@ describe('.stringify()', () => {
  small.b[i] = 'test';
  }
 
- expect(stringify(big)).toMatchSnapshot();
- expect(stringify(small)).toMatchSnapshot();
+ expect(stringify(big)).toBe(prettyFormat(big, {maxDepth: 1, min: true}));
+ expect(stringify(small)).toBe(prettyFormat(small, {min: true}));
  });
 });
 
-describe('.ensureNumbers()', () => {
+describe('ensureNumbers()', () => {
  test('dont throw error when variables are numbers', () => {
  expect(() => {
  // @ts-ignore
@@ -198,7 +202,7 @@ describe('.ensureNumbers()', () => {
  });
 });
 
-describe('.ensureNoExpected()', () => {
+describe('ensureNoExpected()', () => {
  test('dont throw error when undefined', () => {
  expect(() => {
  // @ts-ignore
@@ -251,7 +255,7 @@ describe('diff', () => {
  }
 });
 
-describe('.pluralize()', () => {
+describe('pluralize()', () => {
  test('one', () => expect(pluralize('apple', 1)).toEqual('one apple'));
  test('two', () => expect(pluralize('apple', 2)).toEqual('two apples'));
  test('20', () => expect(pluralize('apple', 20)).toEqual('20 apples'));

packages/jest-matcher-utils/src/__tests__/printDiffOrStringify.test.ts

@@ -5,8 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {alignedAnsiStyleSerializer} from '@jest/test-utils';
 import {EXPECTED_COLOR, INVERTED_COLOR, printDiffOrStringify} from '../index';
 
+expect.addSnapshotSerializer(alignedAnsiStyleSerializer);
+
 describe('printDiffOrStringify', () => {
  const testDiffOrStringify = (expected: string, received: string): string =>
  printDiffOrStringify(expected, received, 'Expected', 'Received', true);

packages/jest-matcher-utils/tsconfig.json

@@ -7,6 +7,7 @@
  "references": [
  {"path": "../jest-diff"},
  {"path": "../jest-get-type"},
- {"path": "../pretty-format"}
+ {"path": "../pretty-format"},
+ {"path": "../test-utils"}
  ]
 }