From 2e16fc43e70572a24218c886cfe672382482c826 Mon Sep 17 00:00:00 2001 From: Mark Pedrotti Date: Mon, 4 Nov 2019 17:30:58 -0500 Subject: [PATCH 1/9] jest-snapshot: Improve colors when snapshots are updatable --- packages/jest-snapshot/package.json | 2 +- .../__snapshots__/printSnapshot.test.ts.snap | 302 +++++++++--------- .../src/__tests__/printSnapshot.test.ts | 139 +++++++- .../jest-snapshot/src/__tests__/utils.test.ts | 2 +- packages/jest-snapshot/src/index.ts | 8 +- packages/jest-snapshot/src/printSnapshot.ts | 59 +++- .../jest-snapshot/src/snapshot_resolver.ts | 2 +- packages/jest-snapshot/src/utils.ts | 2 +- yarn.lock | 15 + 9 files changed, 356 insertions(+), 175 deletions(-) diff --git a/packages/jest-snapshot/package.json b/packages/jest-snapshot/package.json index 928744797d83..d9b8a3729f94 100644 --- a/packages/jest-snapshot/package.json +++ b/packages/jest-snapshot/package.json @@ -12,7 +12,7 @@ "dependencies": { "@babel/types": "^7.0.0", "@jest/types": "^24.9.0", - "chalk": "^2.0.1", + "chalk": "3.0.0-beta.2", "expect": "^24.9.0", "jest-diff": "^24.9.0", "jest-get-type": "^24.9.0", diff --git a/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap b/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap index b32622fee2b7..44986bf59da8 100644 --- a/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap +++ b/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap @@ -155,23 +155,23 @@ Snapshot name: \`with properties 1\` `; exports[`pass false toMatchInlineSnapshot with properties equals true 1`] = ` -expect(received).toMatchInlineSnapshot(properties, snapshot) +expect(received).toMatchInlineSnapshot(properties, snapshot) Snapshot name: \`with properties 1\` -- Snapshot - 1 -+ Received + 1 +- Snapshot - 1 ++ Received + 1 Object { "id": "abcdef", -- "text": "inline snapshot", -+ "text": "received", +- "text": "inline snapshot", ++ "text": "received", "type": "ADD_ITEM", } `; exports[`pass false toMatchSnapshot New snapshot was not written (multi line) 1`] = ` -expect(received).toMatchSnapshot(hint) +expect(received).toMatchSnapshot(hint) Snapshot name: \`New snapshot was not written: (CI) 1\` @@ -180,12 +180,12 @@ New snapshot was not written. The update flag must be explicitly passed to This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default. Received: -"To write or not to write, -that is the question." +"To write or not to write, +that is the question." `; exports[`pass false toMatchSnapshot New snapshot was not written (single line) 1`] = ` -expect(received).toMatchSnapshot(hint) +expect(received).toMatchSnapshot(hint) Snapshot name: \`New snapshot was not written: (CI) 2\` @@ -193,7 +193,7 @@ New snapshot was not written. The update flag must be explicitly passed to This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default. -Received: "Write me if you can!" +Received: "Write me if you can!" `; exports[`pass false toMatchSnapshot with properties equals false isLineDiffable false 1`] = ` @@ -222,76 +222,76 @@ Snapshot name: \`with properties 1\` `; exports[`pass false toMatchSnapshot with properties equals true 1`] = ` -expect(received).toMatchSnapshot(properties, hint) +expect(received).toMatchSnapshot(properties, hint) Snapshot name: \`with properties: change text value 1\` -- Snapshot - 1 -+ Received + 1 +- Snapshot - 1 ++ Received + 1 Object { "id": "abcdef", -- "text": "snapshot", -+ "text": "received", +- "text": "snapshot", ++ "text": "received", "type": "ADD_ITEM", } `; exports[`pass false toThrowErrorMatchingInlineSnapshot with snapshot 1`] = ` -expect(received).toThrowErrorMatchingInlineSnapshot(snapshot) +expect(received).toThrowErrorMatchingInlineSnapshot(snapshot) Snapshot name: \`with snapshot 1\` -Snapshot: "inline snapshot" -Received: "received" +Snapshot: "inline snapshot" +Received: "received" `; exports[`printSnapshotAndReceived backtick single line expected and received 1`] = ` -Snapshot: "var foo = \`backtick\`;" -Received: "var foo = tag\`backtick\`;" +Snapshot: "var foo = \`backtick\`;" +Received: "var foo = tag\`backtick\`;" `; exports[`printSnapshotAndReceived empty string expected and received single line 1`] = ` -Snapshot: "" -Received: "single line string" +Snapshot: "" +Received: "single line string" `; exports[`printSnapshotAndReceived empty string received and expected multi line 1`] = ` -- Snapshot - 3 -+ Received + 0 +- Snapshot - 3 ++ Received + 0 -- multi -- line -- string +- multi +- line +- string `; exports[`printSnapshotAndReceived escape backslash in multi line string 1`] = ` -- Snapshot - 1 -+ Received + 2 +- Snapshot - 1 ++ Received + 2 -- Forward / slash and back \\ slash -+ Forward / slash -+ Back \\ slash +- Forward / slash and back \\ slash ++ Forward / slash ++ Back \\ slash `; exports[`printSnapshotAndReceived escape backslash in single line string 1`] = ` -Snapshot: "forward / slash and back \\\\ slash" -Received: "Forward / slash and back \\\\ slash" +Snapshot: "forward / slash and back \\\\ slash" +Received: "Forward / slash and back \\\\ slash" `; exports[`printSnapshotAndReceived escape double quote marks in string 1`] = ` -Snapshot: "What does \\"oobleck\\" mean?" -Received: "What does \\"ewbleck\\" mean?" +Snapshot: "What does \\"oobleck\\" mean?" +Received: "What does \\"ewbleck\\" mean?" `; exports[`printSnapshotAndReceived escape regexp 1`] = ` -Snapshot: /\\\\\\\\\\("\\)/g -Received: /\\\\\\\\\\("\\)/ +Snapshot: /\\\\\\\\\\("\\)/g +Received: /\\\\\\\\\\("\\)/ `; exports[`printSnapshotAndReceived expand false 1`] = ` -- Snapshot - 1 -+ Received + 3 +- Snapshot - 1 ++ Received + 3 @@ -12,7 +12,9 @@ ? "number" @@ -299,16 +299,16 @@ exports[`printSnapshotAndReceived expand false 1`] = ` ? "boolean" : T extends undefined ? "undefined" -- : T extends Function ? "function" : "object"; -+ : T extends Function -+ ? "function" -+ : "object"; +- : T extends Function ? "function" : "object"; ++ : T extends Function ++ ? "function" ++ : "object"; ↵ `; exports[`printSnapshotAndReceived expand true 1`] = ` -- Snapshot - 1 -+ Received + 3 +- Snapshot - 1 ++ Received + 3 type TypeName = T extends string ? "string" : @@ -326,94 +326,94 @@ exports[`printSnapshotAndReceived expand true 1`] = ` ? "boolean" : T extends undefined ? "undefined" -- : T extends Function ? "function" : "object"; -+ : T extends Function -+ ? "function" -+ : "object"; +- : T extends Function ? "function" : "object"; ++ : T extends Function ++ ? "function" ++ : "object"; ↵ `; exports[`printSnapshotAndReceived fallback to line diff 1`] = ` -- Snapshot - 1 -+ Received + 8 - -+ ====================================options===================================== -+ parsers: ["flow", "typescript"] -+ printWidth: 80 -+ | printWidth -+ =====================================input====================================== +- Snapshot - 1 ++ Received + 8 + ++ ====================================options===================================== ++ parsers: ["flow", "typescript"] ++ printWidth: 80 ++ | printWidth ++ =====================================input====================================== [...a, ...b,]; [...a, ...b]; -- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -+ -+ =====================================output===================================== +- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ++ ++ =====================================output===================================== [...a, ...b]; [...a, ...b]; -+ ================================================================================ ++ ================================================================================ `; exports[`printSnapshotAndReceived has no common after clean up chaff array 1`] = ` -- Snapshot - 2 -+ Received + 2 +- Snapshot - 2 ++ Received + 2 Array [ -- "delete", -- "two", -+ "insert", -+ "2", +- "delete", +- "two", ++ "insert", ++ "2", ] `; exports[`printSnapshotAndReceived has no common after clean up chaff string single line 1`] = ` -Snapshot: "delete" -Received: "insert" +Snapshot: "delete" +Received: "insert" `; exports[`printSnapshotAndReceived isLineDiffable false asymmetric matcher 1`] = ` -Snapshot: null -Received: Object { - "asymmetricMatch": [Function], -} +Snapshot: null +Received: Object { + "asymmetricMatch": [Function], +} `; exports[`printSnapshotAndReceived isLineDiffable false boolean 1`] = ` -Snapshot: true -Received: false +Snapshot: true +Received: false `; exports[`printSnapshotAndReceived isLineDiffable false date 1`] = ` -Snapshot: 2019-09-19T00:00:00.000Z -Received: 2019-09-20T00:00:00.000Z +Snapshot: 2019-09-19T00:00:00.000Z +Received: 2019-09-20T00:00:00.000Z `; exports[`printSnapshotAndReceived isLineDiffable false error 1`] = ` -Snapshot: [Error: Cannot spread fragment "NameAndAppearances" within itself.] -Received: [Error: Cannot spread fragment "NameAndAppearancesAndFriends" within itself.] +Snapshot: [Error: Cannot spread fragment "NameAndAppearances" within itself.] +Received: [Error: Cannot spread fragment "NameAndAppearancesAndFriends" within itself.] `; exports[`printSnapshotAndReceived isLineDiffable false function 1`] = ` -Snapshot: undefined -Received: [Function] +Snapshot: undefined +Received: [Function] `; exports[`printSnapshotAndReceived isLineDiffable false number 1`] = ` -Snapshot: -0 -Received: NaN +Snapshot: -0 +Received: NaN `; exports[`printSnapshotAndReceived isLineDiffable true array 1`] = ` -- Snapshot - 0 -+ Received + 2 +- Snapshot - 0 ++ Received + 2 Array [ Object { -+ "_id": "b14680dec683e744ada1f2fe08614086", ++ "_id": "b14680dec683e744ada1f2fe08614086", "code": 4011, "weight": 2.13, }, Object { -+ "_id": "7fc63ff01769c4fa7d9279e97e307829", ++ "_id": "7fc63ff01769c4fa7d9279e97e307829", "code": 4019, "count": 4, }, @@ -421,112 +421,112 @@ exports[`printSnapshotAndReceived isLineDiffable true array 1`] = ` `; exports[`printSnapshotAndReceived isLineDiffable true object 1`] = ` -- Snapshot - 2 -+ Received + 3 +- Snapshot - 2 ++ Received + 3 Object { "props": Object { -- "className": "logo", -- "src": "/img/jest.png", -+ "alt": "Jest logo", -+ "class": "logo", -+ "src": "/img/jest.svg", +- "className": "logo", +- "src": "/img/jest.png", ++ "alt": "Jest logo", ++ "class": "logo", ++ "src": "/img/jest.svg", }, "type": "img", } `; exports[`printSnapshotAndReceived isLineDiffable true single line expected and multi line received 1`] = ` -- Snapshot - 1 -+ Received + 3 +- Snapshot - 1 ++ Received + 3 -- Array [] -+ Array [ -+ 0, -+ ] +- Array [] ++ Array [ ++ 0, ++ ] `; exports[`printSnapshotAndReceived isLineDiffable true single line expected and received 1`] = ` -- Snapshot - 1 -+ Received + 1 +- Snapshot - 1 ++ Received + 1 -- Array [] -+ Object {} +- Array [] ++ Object {} `; exports[`printSnapshotAndReceived multi line small change in one line and other is unchanged 1`] = ` -- Snapshot - 1 -+ Received + 1 +- Snapshot - 1 ++ Received + 1 -- There is no route defined for key 'Settings'. -+ There is no route defined for key Settings. +- There is no route defined for key 'Settings'. ++ There is no route defined for key Settings. Must be one of: 'Home' `; exports[`printSnapshotAndReceived multi line small changes 1`] = ` -- Snapshot - 7 -+ Received + 7 - -- 69 | -+ 68 | -- 70 | test('assert.doesNotThrow', () => { -+ 69 | test('assert.doesNotThrow', () => { -- > 71 | assert.doesNotThrow(() => { -+ > 70 | assert.doesNotThrow(() => { +- Snapshot - 7 ++ Received + 7 + +- 69 | ++ 68 | +- 70 | test('assert.doesNotThrow', () => { ++ 69 | test('assert.doesNotThrow', () => { +- > 71 | assert.doesNotThrow(() => { ++ > 70 | assert.doesNotThrow(() => { | ^ -- 72 | throw Error('err!'); -+ 71 | throw Error('err!'); -- 73 | }); -+ 72 | }); -- 74 | }); -+ 73 | }); -- at Object.doesNotThrow (__tests__/assertionError.test.js:71:10) -+ at Object.doesNotThrow (__tests__/assertionError.test.js:70:10) +- 72 | throw Error('err!'); ++ 71 | throw Error('err!'); +- 73 | }); ++ 72 | }); +- 74 | }); ++ 73 | }); +- at Object.doesNotThrow (__tests__/assertionError.test.js:71:10) ++ at Object.doesNotThrow (__tests__/assertionError.test.js:70:10) `; exports[`printSnapshotAndReceived single line large changes 1`] = ` -Snapshot: "Array length must be a finite positive integer" -Received: "Invalid array length" +Snapshot: "Array length must be a finite positive integer" +Received: "Invalid array length" `; exports[`printSnapshotAndReceived without serialize backtick single line expected and multi line received 1`] = ` -- Snapshot - 1 -+ Received + 2 +- Snapshot - 1 ++ Received + 2 -- var foo = \`backtick\`; -+ var foo = \`back -+ tick\`; +- var foo = \`backtick\`; ++ var foo = \`back ++ tick\`; `; exports[`printSnapshotAndReceived without serialize backtick single line expected and received 1`] = ` -- Snapshot - 1 -+ Received + 1 +- Snapshot - 1 ++ Received + 1 -- var foo = \`backtick\`; -+ var foo = \`back\${x}tick\`; +- var foo = \`backtick\`; ++ var foo = \`back\${x}tick\`; `; exports[`printSnapshotAndReceived without serialize has no common after clean up chaff multi line 1`] = ` -- Snapshot - 2 -+ Received + 2 +- Snapshot - 2 ++ Received + 2 -- delete -- two -+ insert -+ 2 +- delete +- two ++ insert ++ 2 `; exports[`printSnapshotAndReceived without serialize has no common after clean up chaff single line 1`] = ` -- Snapshot - 1 -+ Received + 1 +- Snapshot - 1 ++ Received + 1 -- delete -+ insert +- delete ++ insert `; exports[`printSnapshotAndReceived without serialize prettier/pull/5590 1`] = ` -- Snapshot - 1 -+ Received + 1 +- Snapshot - 1 ++ Received + 1 @@ -4,8 +4,8 @@ | printWidth @@ -534,8 +534,8 @@ exports[`printSnapshotAndReceived without serialize prettier/pull/5590 1`] = ` John "ShotGun" Nelson =====================================output===================================== -- <i"John "ShotGun" Nelson" /> -+ <i'John "ShotGun" Nelson' /> +- <i"John "ShotGun" Nelson" /> ++ <i'John "ShotGun" Nelson' /> ================================================================================ `; diff --git a/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts b/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts index 6df0bab18d65..246b2aa88f69 100644 --- a/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts +++ b/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts @@ -7,13 +7,51 @@ import ansiRegex = require('ansi-regex'); import * as styles from 'ansi-styles'; -import chalk from 'chalk'; +import chalk = require('chalk'); import format = require('pretty-format'); import jestSnapshot = require('../index'); import {printSnapshotAndReceived} from '../printSnapshot'; import {serialize} from '../utils'; +const { + aBackground2, + aBackground3, + aForeground2, + aForeground3, + bBackground2, + bBackground3, + bForeground2, + bForeground3, + getSnapshotColor, + getReceivedColor, + noColor, +} = require('../printSnapshot'); + +// Format escape sequences for tests to avoid TypeScript problem +// `styles.code` is undefined, maybe because it is non-enumerable? + +const openForeground2 = index => `\x1b[38;5;${index}m`; +const openBackground2 = index => `\x1b[48;5;${index}m`; + +const openForeground3 = rgb => `\x1b[38;2;${rgb[0]};${rgb[1]};${rgb[2]}m`; +const openBackground3 = rgb => `\x1b[48;2;${rgb[0]};${rgb[1]};${rgb[2]}m`; + +const aOpenForeground1 = styles.magenta.open; +const aOpenBackground1 = styles.bgYellowBright.open; +const bOpenForeground1 = styles.green.open; +const bOpenBackground1 = styles.bgWhiteBright.open; + +const aOpenForeground2 = openForeground2(aForeground2); +const aOpenBackground2 = openBackground2(aBackground2); +const bOpenForeground2 = openForeground2(bForeground2); +const bOpenBackground2 = openBackground2(bBackground2); + +const aOpenForeground3 = openForeground3(aForeground3); +const aOpenBackground3 = openBackground3(aBackground3); +const bOpenForeground3 = openForeground3(bForeground3); +const bOpenBackground3 = openBackground3(bBackground3); + const convertAnsi = (val: string): string => val.replace(ansiRegex(), match => { switch (match) { @@ -26,23 +64,38 @@ const convertAnsi = (val: string): string => return ''; case styles.dim.open: return ''; - case styles.green.open: + case styles.bold.close: + case styles.dim.close: + return ''; + + case bOpenForeground1: + case bOpenForeground2: + case bOpenForeground3: return ''; + case aOpenForeground1: + case aOpenForeground2: + case aOpenForeground3: + return ''; case styles.red.open: return ''; case styles.yellow.open: return ''; - case styles.bgYellow.open: - return ''; - - case styles.bold.close: - case styles.dim.close: case styles.green.close: + case styles.magenta.close: case styles.red.close: case styles.yellow.close: - case styles.bgYellow.close: return ''; + case styles.bgYellow.open: + case aOpenBackground1: + case bOpenBackground1: + case aOpenBackground2: + case bOpenBackground2: + case aOpenBackground3: + case bOpenBackground3: + case styles.bgYellow.close: + return ''; + default: return match; } @@ -64,6 +117,76 @@ const { toThrowErrorMatchingSnapshot, } = jestSnapshot; +describe('chalk', () => { + // Because these tests give code coverage of get functions + // and give confidence that the escape sequences are correct, + // convertAnsi can return same serialization for any chalk level + // so snapshot tests pass in any environment with chalk level >= 1. + + // Simulate comparison lines from printSnapshotAndReceived. + const formatLines = chalkInstance => { + const aColor = getSnapshotColor(chalkInstance); + const bColor = getReceivedColor(chalkInstance); + const cColor = chalkInstance.dim; + const changeLineTrailingSpaceColor = noColor; + const commonLineTrailingSpaceColor = chalkInstance.bgYellow; + + return [ + aColor(`- delete 1${changeLineTrailingSpaceColor(' ')}`), + cColor(` common 2${commonLineTrailingSpaceColor(' ')}`), + bColor(`+ insert 0`), + ].join('\n'); + }; + + const expected0 = '- delete 1 \n common 2 \n+ insert 0'; + const expected1 = '- delete 1 \n common 2 \n+ insert 0'; + + test('level 0', () => { + const chalkInstance = new chalk.Instance({level: 0}); + const formatted = formatLines(chalkInstance); + const converted = convertAnsi(formatted); + + expect(converted).toBe(expected0); + expect(formatted).toBe(expected0); + }); + + test('level 1', () => { + const chalkInstance = new chalk.Instance({level: 1}); + const formatted = formatLines(chalkInstance); + const converted = convertAnsi(formatted); + + expect(converted).toBe(expected1); + expect(formatted).toMatch(aOpenForeground1 + aOpenBackground1 + '-'); + expect(formatted).toMatch(bOpenForeground1 + bOpenBackground1 + '+'); + expect(formatted).not.toMatch(chalkInstance.bgYellow(' ')); // noColor + expect(formatted).toMatch(chalkInstance.bgYellow(' ')); + }); + + test('level 2', () => { + const chalkInstance = new chalk.Instance({level: 2}); + const formatted = formatLines(chalkInstance); + const converted = convertAnsi(formatted); + + expect(converted).toBe(expected1); + expect(formatted).toMatch(aOpenForeground2 + aOpenBackground2 + '-'); + expect(formatted).toMatch(bOpenForeground2 + bOpenBackground2 + '+'); + expect(formatted).not.toMatch(chalkInstance.bgYellow(' ')); // noColor + expect(formatted).toMatch(chalkInstance.bgYellow(' ')); + }); + + test('level 3', () => { + const chalkInstance = new chalk.Instance({level: 3}); + const formatted = formatLines(chalkInstance); + const converted = convertAnsi(formatted); + + expect(converted).toBe(expected1); + expect(formatted).toMatch(aOpenForeground3 + aOpenBackground3 + '-'); + expect(formatted).toMatch(bOpenForeground3 + bOpenBackground3 + '+'); + expect(formatted).not.toMatch(chalkInstance.bgYellow(' ')); // noColor + expect(formatted).toMatch(chalkInstance.bgYellow(' ')); + }); +}); + describe('matcher error', () => { describe('toMatchInlineSnapshot', () => { const received = { diff --git a/packages/jest-snapshot/src/__tests__/utils.test.ts b/packages/jest-snapshot/src/__tests__/utils.test.ts index f2c12fb2b1d9..fb2d1ad9194c 100644 --- a/packages/jest-snapshot/src/__tests__/utils.test.ts +++ b/packages/jest-snapshot/src/__tests__/utils.test.ts @@ -13,7 +13,7 @@ jest.mock('fs', () => ({ import * as fs from 'fs'; import * as path from 'path'; import assert = require('assert'); -import chalk from 'chalk'; +import chalk = require('chalk'); import { SNAPSHOT_GUIDE_LINK, diff --git a/packages/jest-snapshot/src/index.ts b/packages/jest-snapshot/src/index.ts index 33b5c9176429..9a3d87637435 100644 --- a/packages/jest-snapshot/src/index.ts +++ b/packages/jest-snapshot/src/index.ts @@ -5,6 +5,7 @@ * LICENSE file in the root directory of this source tree. */ +import chalk = require('chalk'); import * as fs from 'fs'; import {Config} from '@jest/types'; import {FS as HasteFS} from 'jest-haste-map'; // eslint-disable-line import/no-extraneous-dependencies @@ -30,6 +31,7 @@ import {addSerializer, getSerializers} from './plugins'; import { PROPERTIES_ARG, SNAPSHOT_ARG, + getReceivedColor, matcherHintFromConfig, noColor, printExpected, @@ -384,9 +386,9 @@ const _toMatchSnapshot = (config: MatchSnapshotConfig) => { `must be explicitly passed to write a new snapshot.\n\n` + `This is likely because this test is run in a continuous integration ` + `(CI) environment in which snapshots are not written by default.\n\n` + - `Received:${actual.includes('\n') ? '\n' : ' '}${RECEIVED_COLOR( - actual, - )}` + `Received:${actual.includes('\n') ? '\n' : ' '}${getReceivedColor( + chalk, + )(actual)}` : () => matcherHintFromConfig(config, true) + '\n\n' + diff --git a/packages/jest-snapshot/src/printSnapshot.ts b/packages/jest-snapshot/src/printSnapshot.ts index 40de416e60a8..74e3fabf9092 100644 --- a/packages/jest-snapshot/src/printSnapshot.ts +++ b/packages/jest-snapshot/src/printSnapshot.ts @@ -5,12 +5,13 @@ * LICENSE file in the root directory of this source tree. */ -import chalk from 'chalk'; +import chalk = require('chalk'); import { DIFF_DELETE, DIFF_EQUAL, DIFF_INSERT, Diff, + DiffOptionsColor, diffLinesUnified, diffStringsRaw, diffStringsUnified, @@ -30,6 +31,45 @@ import prettyFormat = require('pretty-format'); import {MatchSnapshotConfig} from './types'; import {deserializeString, minify, serialize} from './utils'; +type Chalk = chalk.Chalk; + +// https://jonasjacek.github.io/colors/ +// https://webaim.org/resources/contrastchecker/ + +// Contrast 6.89 AA +export const aForeground2 = 90; // #870087 +export const aBackground2 = 225; // #ffd7ff + +// Contrast 7.27 AAA +export const bForeground2 = 22; // #005f00 +export const bBackground2 = 194; // #d7ffd7 + +// Contast 7.36 AAA +export const aForeground3 = [128, 0, 128]; // #800080 +export const aBackground3 = [255, 215, 255]; // #ffd7ff + +// Contrast 7.27 AAA +export const bForeground3 = [0, 95, 0]; // #005f00 +export const bBackground3 = [215, 255, 215]; // #d7ffd7 + +export const getSnapshotColor = (chalkInstance: Chalk): DiffOptionsColor => + chalkInstance.level === 3 + ? chalkInstance + .rgb(aForeground3[0], aForeground3[1], aForeground3[2]) + .bgRgb(aBackground3[0], aBackground3[1], aBackground3[2]) + : chalkInstance.level === 2 + ? chalkInstance.ansi256(aForeground2).bgAnsi256(aBackground2) + : chalkInstance.magenta.bgYellowBright; + +export const getReceivedColor = (chalkInstance: Chalk): DiffOptionsColor => + chalkInstance.level === 3 + ? chalkInstance + .rgb(bForeground3[0], bForeground3[1], bForeground3[2]) + .bgRgb(bBackground3[0], bBackground3[1], bBackground3[2]) + : chalkInstance.level === 2 + ? chalkInstance.ansi256(bForeground2).bgAnsi256(bBackground2) + : chalkInstance.green.bgWhiteBright; + export const noColor = (string: string) => string; export const HINT_ARG = 'hint'; @@ -47,6 +87,9 @@ export const matcherHintFromConfig = ( isUpdatable: boolean, ): string => { const options: MatcherHintOptions = {isNot, promise}; + if (isUpdatable) { + options.receivedColor = getReceivedColor(chalk); + } let expectedArgument = ''; @@ -61,9 +104,9 @@ export const matcherHintFromConfig = ( options.secondArgumentColor = BOLD_WEIGHT; } else if (typeof inlineSnapshot === 'string') { options.secondArgument = SNAPSHOT_ARG; - if (!isUpdatable) { - options.secondArgumentColor = noColor; - } + options.secondArgumentColor = isUpdatable + ? getSnapshotColor(chalk) + : noColor; } } else { if (typeof hint === 'string' && hint.length !== 0) { @@ -71,9 +114,7 @@ export const matcherHintFromConfig = ( options.expectedColor = BOLD_WEIGHT; } else if (typeof inlineSnapshot === 'string') { expectedArgument = SNAPSHOT_ARG; - if (!isUpdatable) { - options.expectedColor = noColor; - } + options.expectedColor = isUpdatable ? getSnapshotColor(chalk) : noColor; } } @@ -181,8 +222,8 @@ export const printSnapshotAndReceived = ( ): string => { const aAnnotation = 'Snapshot'; const bAnnotation = 'Received'; - const aColor = EXPECTED_COLOR; - const bColor = RECEIVED_COLOR; + const aColor = getSnapshotColor(chalk); + const bColor = getReceivedColor(chalk); const options = { aAnnotation, aColor, diff --git a/packages/jest-snapshot/src/snapshot_resolver.ts b/packages/jest-snapshot/src/snapshot_resolver.ts index 203eec627b2d..f6b59f17946c 100644 --- a/packages/jest-snapshot/src/snapshot_resolver.ts +++ b/packages/jest-snapshot/src/snapshot_resolver.ts @@ -7,7 +7,7 @@ import * as path from 'path'; import {Config} from '@jest/types'; -import chalk from 'chalk'; +import chalk = require('chalk'); export type SnapshotResolver = { testPathForConsistencyCheck: string; diff --git a/packages/jest-snapshot/src/utils.ts b/packages/jest-snapshot/src/utils.ts index af0d059476e1..379319575706 100644 --- a/packages/jest-snapshot/src/utils.ts +++ b/packages/jest-snapshot/src/utils.ts @@ -9,7 +9,7 @@ import * as fs from 'fs'; import * as path from 'path'; import {sync as mkdirp} from 'mkdirp'; import naturalCompare = require('natural-compare'); -import chalk from 'chalk'; +import chalk = require('chalk'); import {Config} from '@jest/types'; import prettyFormat = require('pretty-format'); import {getSerializers} from './plugins'; diff --git a/yarn.lock b/yarn.lock index 39b8d123b7e8..27b3d5c2ba8d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3741,6 +3741,14 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4. escape-string-regexp "^1.0.5" supports-color "^5.3.0" +chalk@3.0.0-beta.2: + version "3.0.0-beta.2" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0-beta.2.tgz#d6a422d12828314a6f2ecad6863c68b706598a22" + integrity sha512-NKGY083nqioebgPmjRTGY/bRq34dgkXkmHmWgwDXbPs0YEkN7ZTcimhnv1KnHGW80QPta1QZiJDbQv7s+e+uaQ== + dependencies: + ansi-styles "^4.1.0" + supports-color "^7.1.0" + character-entities-legacy@^1.0.0: version "1.1.3" resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz#3c729991d9293da0ede6dddcaf1f2ce1009ee8b4" @@ -13135,6 +13143,13 @@ supports-color@^7.0.0: dependencies: has-flag "^4.0.0" +supports-color@^7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1" + integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g== + dependencies: + has-flag "^4.0.0" + supports-hyperlinks@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.0.0.tgz#b1b94a159e9df00b0a554b2d5f0e0a89690334b0" From afebcf68f31ac0fbb546b1947717e081eb462272 Mon Sep 17 00:00:00 2001 From: Mark Pedrotti Date: Mon, 4 Nov 2019 17:47:55 -0500 Subject: [PATCH 2/9] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5865b17d2e3c..1cc353578b14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ - `[jest-runner]` Warn if a worker had to be force exited ([#8206](https://github.com/facebook/jest/pull/8206)) - `[jest-snapshot]` Display change counts in annotation lines ([#8982](https://github.com/facebook/jest/pull/8982)) - `[jest-snapshot]` [**BREAKING**] Improve report when the matcher has properties ([#9104](https://github.com/facebook/jest/pull/9104)) +- `[jest-snapshot]` Improve colors when snapshots are updatable ([#9132](https://github.com/facebook/jest/pull/9132)) - `[@jest/test-result]` Create method to create empty `TestResult` ([#8867](https://github.com/facebook/jest/pull/8867)) - `[jest-worker]` [**BREAKING**] Return a promise from `end()`, resolving with the information whether workers exited gracefully ([#8206](https://github.com/facebook/jest/pull/8206)) - `[jest-reporters]` Transform file paths into hyperlinks ([#8980](https://github.com/facebook/jest/pull/8980)) From 930576665fcad756efac67a5474f995822ab9849 Mon Sep 17 00:00:00 2001 From: Mark Pedrotti Date: Tue, 5 Nov 2019 10:44:54 -0500 Subject: [PATCH 3/9] Trailing spaces in changed lines do not need own bg color --- packages/jest-snapshot/src/printSnapshot.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jest-snapshot/src/printSnapshot.ts b/packages/jest-snapshot/src/printSnapshot.ts index 74e3fabf9092..85f2a249b240 100644 --- a/packages/jest-snapshot/src/printSnapshot.ts +++ b/packages/jest-snapshot/src/printSnapshot.ts @@ -229,7 +229,7 @@ export const printSnapshotAndReceived = ( aColor, bAnnotation, bColor, - changeLineTrailingSpaceColor: chalk.bgYellow, + changeLineTrailingSpaceColor: noColor, commonLineTrailingSpaceColor: chalk.bgYellow, emptyFirstOrLastLinePlaceholder: '↵', // U+21B5 expand, From 68b38a8ed5167b2141ecc66601f01960a5c66d54 Mon Sep 17 00:00:00 2001 From: Mark Pedrotti Date: Wed, 6 Nov 2019 09:47:09 -0500 Subject: [PATCH 4/9] Improve convertAnsi to test for trailing spaces in common lines --- .../src/__tests__/printSnapshot.test.ts | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts b/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts index 246b2aa88f69..9c6d691728d5 100644 --- a/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts +++ b/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts @@ -52,8 +52,11 @@ const aOpenBackground3 = openBackground3(aBackground3); const bOpenForeground3 = openForeground3(bForeground3); const bOpenBackground3 = openBackground3(bBackground3); -const convertAnsi = (val: string): string => - val.replace(ansiRegex(), match => { +const convertAnsi = (val: string): string => { + // Trailing spaces in common lines have yellow background color. + let isYellowBackground = false; + + return val.replace(ansiRegex(), match => { switch (match) { case styles.inverse.open: return ''; @@ -87,19 +90,27 @@ const convertAnsi = (val: string): string => return ''; case styles.bgYellow.open: + isYellowBackground = true; + return ''; + case aOpenBackground1: case bOpenBackground1: case aOpenBackground2: case bOpenBackground2: case aOpenBackground3: case bOpenBackground3: - case styles.bgYellow.close: + isYellowBackground = false; return ''; + case styles.bgYellow.close: + // The same code closes any background color. + return isYellowBackground ? '' : ''; + default: return match; } }); +}; expect.addSnapshotSerializer({ serialize(val: string): string { @@ -139,7 +150,8 @@ describe('chalk', () => { }; const expected0 = '- delete 1 \n common 2 \n+ insert 0'; - const expected1 = '- delete 1 \n common 2 \n+ insert 0'; + const expected1 = + '- delete 1 \n common 2 \n+ insert 0'; test('level 0', () => { const chalkInstance = new chalk.Instance({level: 0}); From fa8229f7c541ca38adcf9f2057d4efa1ac54048d Mon Sep 17 00:00:00 2001 From: Mark Pedrotti Date: Sun, 10 Nov 2019 15:19:16 -0500 Subject: [PATCH 5/9] Make changes requested by Simen and update 2 snapshots --- .../__snapshots__/printSnapshot.test.ts.snap | 4 +- .../src/__tests__/printSnapshot.test.ts | 22 ++-- packages/jest-snapshot/src/colors.ts | 27 +++++ packages/jest-snapshot/src/index.ts | 7 +- packages/jest-snapshot/src/printSnapshot.ts | 103 ++++++++++-------- 5 files changed, 104 insertions(+), 59 deletions(-) create mode 100644 packages/jest-snapshot/src/colors.ts diff --git a/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap b/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap index 44986bf59da8..7319ccb2ac83 100644 --- a/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap +++ b/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap @@ -27,7 +27,7 @@ Inline snapshot has value: Symbol(is not a string) `; exports[`matcher error toMatchInlineSnapshot Snapshot matchers cannot be used with not 1`] = ` -expect(received).not.toMatchInlineSnapshot(snapshot) +expect(received).not.toMatchInlineSnapshot(snapshot) Matcher error: Snapshot matchers cannot be used with not `; @@ -94,7 +94,7 @@ Inline snapshot has value: 404 `; exports[`matcher error toThrowErrorMatchingInlineSnapshot Snapshot state must be initialized 1`] = ` -expect(received).rejects.toThrowErrorMatchingInlineSnapshot(snapshot) +expect(received).rejects.toThrowErrorMatchingInlineSnapshot(snapshot) Snapshot state must be initialized diff --git a/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts b/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts index 9c6d691728d5..f82a0f2c1bb0 100644 --- a/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts +++ b/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts @@ -11,10 +11,14 @@ import chalk = require('chalk'); import format = require('pretty-format'); import jestSnapshot = require('../index'); -import {printSnapshotAndReceived} from '../printSnapshot'; +import { + getReceivedColorForChalkInstance, + getSnapshotColorForChalkInstance, + noColor, + printSnapshotAndReceived, +} from '../printSnapshot'; import {serialize} from '../utils'; - -const { +import { aBackground2, aBackground3, aForeground2, @@ -23,13 +27,11 @@ const { bBackground3, bForeground2, bForeground3, - getSnapshotColor, - getReceivedColor, - noColor, -} = require('../printSnapshot'); +} from '../colors'; // Format escape sequences for tests to avoid TypeScript problem -// `styles.code` is undefined, maybe because it is non-enumerable? +// `styles.color` and `styles.bgColor` are undefined, +// maybe because they are defined as non-enumerable properties? const openForeground2 = index => `\x1b[38;5;${index}m`; const openBackground2 = index => `\x1b[48;5;${index}m`; @@ -136,8 +138,8 @@ describe('chalk', () => { // Simulate comparison lines from printSnapshotAndReceived. const formatLines = chalkInstance => { - const aColor = getSnapshotColor(chalkInstance); - const bColor = getReceivedColor(chalkInstance); + const aColor = getSnapshotColorForChalkInstance(chalkInstance); + const bColor = getReceivedColorForChalkInstance(chalkInstance); const cColor = chalkInstance.dim; const changeLineTrailingSpaceColor = noColor; const commonLineTrailingSpaceColor = chalkInstance.bgYellow; diff --git a/packages/jest-snapshot/src/colors.ts b/packages/jest-snapshot/src/colors.ts new file mode 100644 index 000000000000..ed4eb016ad93 --- /dev/null +++ b/packages/jest-snapshot/src/colors.ts @@ -0,0 +1,27 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +// https://jonasjacek.github.io/colors/ +// https://webaim.org/resources/contrastchecker/ + +// Contrast 6.89 AA +export const aForeground2 = 90; // #870087 +export const aBackground2 = 225; // #ffd7ff + +// Contrast 7.27 AAA +export const bForeground2 = 22; // #005f00 +export const bBackground2 = 194; // #d7ffd7 + +export type RGB = [number, number, number]; + +// Contast 7.36 AAA +export const aForeground3: RGB = [128, 0, 128]; // #800080 +export const aBackground3: RGB = [255, 215, 255]; // #ffd7ff + +// Contrast 7.27 AAA +export const bForeground3: RGB = [0, 95, 0]; // #005f00 +export const bBackground3: RGB = [215, 255, 215]; // #d7ffd7 diff --git a/packages/jest-snapshot/src/index.ts b/packages/jest-snapshot/src/index.ts index 9a3d87637435..0bbe1050de55 100644 --- a/packages/jest-snapshot/src/index.ts +++ b/packages/jest-snapshot/src/index.ts @@ -5,7 +5,6 @@ * LICENSE file in the root directory of this source tree. */ -import chalk = require('chalk'); import * as fs from 'fs'; import {Config} from '@jest/types'; import {FS as HasteFS} from 'jest-haste-map'; // eslint-disable-line import/no-extraneous-dependencies @@ -386,9 +385,9 @@ const _toMatchSnapshot = (config: MatchSnapshotConfig) => { `must be explicitly passed to write a new snapshot.\n\n` + `This is likely because this test is run in a continuous integration ` + `(CI) environment in which snapshots are not written by default.\n\n` + - `Received:${actual.includes('\n') ? '\n' : ' '}${getReceivedColor( - chalk, - )(actual)}` + `Received:${actual.includes('\n') ? '\n' : ' '}${getReceivedColor()( + actual, + )}` : () => matcherHintFromConfig(config, true) + '\n\n' + diff --git a/packages/jest-snapshot/src/printSnapshot.ts b/packages/jest-snapshot/src/printSnapshot.ts index b1cc632c3645..fb6336681998 100644 --- a/packages/jest-snapshot/src/printSnapshot.ts +++ b/packages/jest-snapshot/src/printSnapshot.ts @@ -27,47 +27,60 @@ import { matcherHint, } from 'jest-matcher-utils'; import prettyFormat = require('pretty-format'); + +import { + aBackground2, + aBackground3, + aForeground2, + aForeground3, + bBackground2, + bBackground3, + bForeground2, + bForeground3, +} from './colors'; import {MatchSnapshotConfig} from './types'; import {deserializeString, minify, serialize} from './utils'; type Chalk = chalk.Chalk; -// https://jonasjacek.github.io/colors/ -// https://webaim.org/resources/contrastchecker/ - -// Contrast 6.89 AA -export const aForeground2 = 90; // #870087 -export const aBackground2 = 225; // #ffd7ff - -// Contrast 7.27 AAA -export const bForeground2 = 22; // #005f00 -export const bBackground2 = 194; // #d7ffd7 - -// Contast 7.36 AAA -export const aForeground3 = [128, 0, 128]; // #800080 -export const aBackground3 = [255, 215, 255]; // #ffd7ff - -// Contrast 7.27 AAA -export const bForeground3 = [0, 95, 0]; // #005f00 -export const bBackground3 = [215, 255, 215]; // #d7ffd7 - -export const getSnapshotColor = (chalkInstance: Chalk): DiffOptionsColor => - chalkInstance.level === 3 - ? chalkInstance - .rgb(aForeground3[0], aForeground3[1], aForeground3[2]) - .bgRgb(aBackground3[0], aBackground3[1], aBackground3[2]) - : chalkInstance.level === 2 - ? chalkInstance.ansi256(aForeground2).bgAnsi256(aBackground2) - : chalkInstance.magenta.bgYellowBright; - -export const getReceivedColor = (chalkInstance: Chalk): DiffOptionsColor => - chalkInstance.level === 3 - ? chalkInstance - .rgb(bForeground3[0], bForeground3[1], bForeground3[2]) - .bgRgb(bBackground3[0], bBackground3[1], bBackground3[2]) - : chalkInstance.level === 2 - ? chalkInstance.ansi256(bForeground2).bgAnsi256(bBackground2) - : chalkInstance.green.bgWhiteBright; +export const getSnapshotColorForChalkInstance = ( + chalkInstance: Chalk, +): DiffOptionsColor => { + const level = chalkInstance.level; + + if (level === 3) { + return chalkInstance + .rgb(aForeground3[0], aForeground3[1], aForeground3[2]) + .bgRgb(aBackground3[0], aBackground3[1], aBackground3[2]); + } + + if (level === 2) { + return chalkInstance.ansi256(aForeground2).bgAnsi256(aBackground2); + } + + return chalkInstance.magenta.bgYellowBright; +}; + +export const getReceivedColorForChalkInstance = ( + chalkInstance: Chalk, +): DiffOptionsColor => { + const level = chalkInstance.level; + + if (level === 3) { + return chalkInstance + .rgb(bForeground3[0], bForeground3[1], bForeground3[2]) + .bgRgb(bBackground3[0], bBackground3[1], bBackground3[2]); + } + + if (level === 2) { + return chalkInstance.ansi256(bForeground2).bgAnsi256(bBackground2); + } + + return chalkInstance.green.bgWhiteBright; +}; + +export const getSnapshotColor = () => getSnapshotColorForChalkInstance(chalk); +export const getReceivedColor = () => getReceivedColorForChalkInstance(chalk); export const noColor = (string: string) => string; @@ -87,7 +100,7 @@ export const matcherHintFromConfig = ( ): string => { const options: MatcherHintOptions = {isNot, promise}; if (isUpdatable) { - options.receivedColor = getReceivedColor(chalk); + options.receivedColor = getReceivedColor(); } let expectedArgument = ''; @@ -103,9 +116,11 @@ export const matcherHintFromConfig = ( options.secondArgumentColor = BOLD_WEIGHT; } else if (typeof inlineSnapshot === 'string') { options.secondArgument = SNAPSHOT_ARG; - options.secondArgumentColor = isUpdatable - ? getSnapshotColor(chalk) - : noColor; + if (isUpdatable) { + options.secondArgumentColor = getSnapshotColor(); + } else { + options.secondArgumentColor = noColor; + } } } else { if (typeof hint === 'string' && hint.length !== 0) { @@ -113,7 +128,9 @@ export const matcherHintFromConfig = ( options.expectedColor = BOLD_WEIGHT; } else if (typeof inlineSnapshot === 'string') { expectedArgument = SNAPSHOT_ARG; - options.expectedColor = isUpdatable ? getSnapshotColor(chalk) : noColor; + if (isUpdatable) { + options.expectedColor = getSnapshotColor(); + } } } @@ -221,8 +238,8 @@ export const printSnapshotAndReceived = ( ): string => { const aAnnotation = 'Snapshot'; const bAnnotation = 'Received'; - const aColor = getSnapshotColor(chalk); - const bColor = getReceivedColor(chalk); + const aColor = getSnapshotColor(); + const bColor = getReceivedColor(); const options = { aAnnotation, aColor, From d8df65ec6b63dec88ba120ba8fad248b73689a15 Mon Sep 17 00:00:00 2001 From: Mark Pedrotti Date: Sun, 10 Nov 2019 17:23:50 -0500 Subject: [PATCH 6/9] Fix my mistake when resolving merge conflict in yarn.lock --- .../src/__tests__/printSnapshot.test.ts | 46 +++++++++++-------- packages/jest-snapshot/src/colors.ts | 21 ++++----- yarn.lock | 7 --- 3 files changed, 34 insertions(+), 40 deletions(-) diff --git a/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts b/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts index f82a0f2c1bb0..8ca3c12a33fe 100644 --- a/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts +++ b/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts @@ -6,7 +6,7 @@ */ import ansiRegex = require('ansi-regex'); -import * as styles from 'ansi-styles'; +import styles = require('ansi-styles'); import chalk = require('chalk'); import format = require('pretty-format'); @@ -29,30 +29,36 @@ import { bForeground3, } from '../colors'; -// Format escape sequences for tests to avoid TypeScript problem -// `styles.color` and `styles.bgColor` are undefined, -// maybe because they are defined as non-enumerable properties? - -const openForeground2 = index => `\x1b[38;5;${index}m`; -const openBackground2 = index => `\x1b[48;5;${index}m`; - -const openForeground3 = rgb => `\x1b[38;2;${rgb[0]};${rgb[1]};${rgb[2]}m`; -const openBackground3 = rgb => `\x1b[48;2;${rgb[0]};${rgb[1]};${rgb[2]}m`; - const aOpenForeground1 = styles.magenta.open; const aOpenBackground1 = styles.bgYellowBright.open; const bOpenForeground1 = styles.green.open; const bOpenBackground1 = styles.bgWhiteBright.open; -const aOpenForeground2 = openForeground2(aForeground2); -const aOpenBackground2 = openBackground2(aBackground2); -const bOpenForeground2 = openForeground2(bForeground2); -const bOpenBackground2 = openBackground2(bBackground2); - -const aOpenForeground3 = openForeground3(aForeground3); -const aOpenBackground3 = openBackground3(aBackground3); -const bOpenForeground3 = openForeground3(bForeground3); -const bOpenBackground3 = openBackground3(bBackground3); +const aOpenForeground2 = styles.color.ansi256.ansi256(aForeground2); +const bOpenForeground2 = styles.color.ansi256.ansi256(bForeground2); +const aOpenBackground2 = styles.bgColor.ansi256.ansi256(aBackground2); +const bOpenBackground2 = styles.bgColor.ansi256.ansi256(bBackground2); + +const aOpenForeground3 = styles.color.ansi16m.rgb( + aForeground3[0], + aForeground3[1], + aForeground3[2], +); +const bOpenForeground3 = styles.color.ansi16m.rgb( + bForeground3[0], + bForeground3[1], + bForeground3[2], +); +const aOpenBackground3 = styles.bgColor.ansi16m.rgb( + aBackground3[0], + aBackground3[1], + aBackground3[2], +); +const bOpenBackground3 = styles.bgColor.ansi16m.rgb( + bBackground3[0], + bBackground3[1], + bBackground3[2], +); const convertAnsi = (val: string): string => { // Trailing spaces in common lines have yellow background color. diff --git a/packages/jest-snapshot/src/colors.ts b/packages/jest-snapshot/src/colors.ts index ed4eb016ad93..282ee860083c 100644 --- a/packages/jest-snapshot/src/colors.ts +++ b/packages/jest-snapshot/src/colors.ts @@ -6,22 +6,17 @@ */ // https://jonasjacek.github.io/colors/ -// https://webaim.org/resources/contrastchecker/ -// Contrast 6.89 AA -export const aForeground2 = 90; // #870087 -export const aBackground2 = 225; // #ffd7ff +export const aForeground2 = 90; +export const aBackground2 = 225; -// Contrast 7.27 AAA -export const bForeground2 = 22; // #005f00 -export const bBackground2 = 194; // #d7ffd7 +export const bForeground2 = 22; +export const bBackground2 = 194; export type RGB = [number, number, number]; -// Contast 7.36 AAA -export const aForeground3: RGB = [128, 0, 128]; // #800080 -export const aBackground3: RGB = [255, 215, 255]; // #ffd7ff +export const aForeground3: RGB = [0x80, 0x0, 0x80]; +export const aBackground3: RGB = [0xff, 0xd7, 0xff]; -// Contrast 7.27 AAA -export const bForeground3: RGB = [0, 95, 0]; // #005f00 -export const bBackground3: RGB = [215, 255, 215]; // #d7ffd7 +export const bForeground3: RGB = [0x0, 0x5f, 0x0]; +export const bBackground3: RGB = [0xd7, 0xff, 0xd7]; diff --git a/yarn.lock b/yarn.lock index 50b4d4e6decb..16ace8631146 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13173,13 +13173,6 @@ supports-color@^7.0.0, supports-color@^7.1.0: dependencies: has-flag "^4.0.0" -supports-color@^7.1.0: - version "7.1.0" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1" - integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g== - dependencies: - has-flag "^4.0.0" - supports-hyperlinks@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.0.0.tgz#b1b94a159e9df00b0a554b2d5f0e0a89690334b0" From 72d155a4e5f82c4efb41c12b915c5ae2d8b4dcbf Mon Sep 17 00:00:00 2001 From: Mark Pedrotti Date: Tue, 12 Nov 2019 13:57:05 -0500 Subject: [PATCH 7/9] Replace 0x0 with 0 to reduce visual noise --- packages/jest-snapshot/src/colors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/jest-snapshot/src/colors.ts b/packages/jest-snapshot/src/colors.ts index 282ee860083c..eb4273123354 100644 --- a/packages/jest-snapshot/src/colors.ts +++ b/packages/jest-snapshot/src/colors.ts @@ -15,8 +15,8 @@ export const bBackground2 = 194; export type RGB = [number, number, number]; -export const aForeground3: RGB = [0x80, 0x0, 0x80]; +export const aForeground3: RGB = [0x80, 0, 0x80]; export const aBackground3: RGB = [0xff, 0xd7, 0xff]; -export const bForeground3: RGB = [0x0, 0x5f, 0x0]; +export const bForeground3: RGB = [0, 0x5f, 0]; export const bBackground3: RGB = [0xd7, 0xff, 0xd7]; From 3ae4047898aa78fc99785bf426bd5a0c245779e4 Mon Sep 17 00:00:00 2001 From: Mark Pedrotti Date: Tue, 12 Nov 2019 14:03:15 -0500 Subject: [PATCH 8/9] Replace get functions with aSnapshotColor and bReceivedColor --- packages/jest-snapshot/src/index.ts | 4 ++-- packages/jest-snapshot/src/printSnapshot.ts | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/jest-snapshot/src/index.ts b/packages/jest-snapshot/src/index.ts index 0bbe1050de55..1fbabce0fc22 100644 --- a/packages/jest-snapshot/src/index.ts +++ b/packages/jest-snapshot/src/index.ts @@ -30,7 +30,7 @@ import {addSerializer, getSerializers} from './plugins'; import { PROPERTIES_ARG, SNAPSHOT_ARG, - getReceivedColor, + bReceivedColor, matcherHintFromConfig, noColor, printExpected, @@ -385,7 +385,7 @@ const _toMatchSnapshot = (config: MatchSnapshotConfig) => { `must be explicitly passed to write a new snapshot.\n\n` + `This is likely because this test is run in a continuous integration ` + `(CI) environment in which snapshots are not written by default.\n\n` + - `Received:${actual.includes('\n') ? '\n' : ' '}${getReceivedColor()( + `Received:${actual.includes('\n') ? '\n' : ' '}${bReceivedColor( actual, )}` : () => diff --git a/packages/jest-snapshot/src/printSnapshot.ts b/packages/jest-snapshot/src/printSnapshot.ts index fb6336681998..74cfc27b391f 100644 --- a/packages/jest-snapshot/src/printSnapshot.ts +++ b/packages/jest-snapshot/src/printSnapshot.ts @@ -79,8 +79,8 @@ export const getReceivedColorForChalkInstance = ( return chalkInstance.green.bgWhiteBright; }; -export const getSnapshotColor = () => getSnapshotColorForChalkInstance(chalk); -export const getReceivedColor = () => getReceivedColorForChalkInstance(chalk); +export const aSnapshotColor = getSnapshotColorForChalkInstance(chalk); +export const bReceivedColor = getReceivedColorForChalkInstance(chalk); export const noColor = (string: string) => string; @@ -100,7 +100,7 @@ export const matcherHintFromConfig = ( ): string => { const options: MatcherHintOptions = {isNot, promise}; if (isUpdatable) { - options.receivedColor = getReceivedColor(); + options.receivedColor = bReceivedColor; } let expectedArgument = ''; @@ -117,7 +117,7 @@ export const matcherHintFromConfig = ( } else if (typeof inlineSnapshot === 'string') { options.secondArgument = SNAPSHOT_ARG; if (isUpdatable) { - options.secondArgumentColor = getSnapshotColor(); + options.secondArgumentColor = aSnapshotColor; } else { options.secondArgumentColor = noColor; } @@ -129,7 +129,7 @@ export const matcherHintFromConfig = ( } else if (typeof inlineSnapshot === 'string') { expectedArgument = SNAPSHOT_ARG; if (isUpdatable) { - options.expectedColor = getSnapshotColor(); + options.expectedColor = aSnapshotColor; } } } @@ -238,8 +238,8 @@ export const printSnapshotAndReceived = ( ): string => { const aAnnotation = 'Snapshot'; const bAnnotation = 'Received'; - const aColor = getSnapshotColor(); - const bColor = getReceivedColor(); + const aColor = aSnapshotColor; + const bColor = bReceivedColor; const options = { aAnnotation, aColor, From 227033ea0ad441f848e8ef2f861230823cec9371 Mon Sep 17 00:00:00 2001 From: Mark Pedrotti Date: Thu, 14 Nov 2019 08:36:01 -0500 Subject: [PATCH 9/9] Replace green with teal as Received color --- .../__snapshots__/printSnapshot.test.ts.snap | 174 +++++++++--------- .../src/__tests__/printSnapshot.test.ts | 13 +- packages/jest-snapshot/src/colors.ts | 8 +- packages/jest-snapshot/src/printSnapshot.ts | 2 +- 4 files changed, 100 insertions(+), 97 deletions(-) diff --git a/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap b/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap index 7319ccb2ac83..6e0727d0407f 100644 --- a/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap +++ b/packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap @@ -155,23 +155,23 @@ Snapshot name: \`with properties 1\` `; exports[`pass false toMatchInlineSnapshot with properties equals true 1`] = ` -expect(received).toMatchInlineSnapshot(properties, snapshot) +expect(received).toMatchInlineSnapshot(properties, snapshot) Snapshot name: \`with properties 1\` - Snapshot - 1 -+ Received + 1 ++ Received + 1 Object { "id": "abcdef", - "text": "inline snapshot", -+ "text": "received", ++ "text": "received", "type": "ADD_ITEM", } `; exports[`pass false toMatchSnapshot New snapshot was not written (multi line) 1`] = ` -expect(received).toMatchSnapshot(hint) +expect(received).toMatchSnapshot(hint) Snapshot name: \`New snapshot was not written: (CI) 1\` @@ -180,12 +180,12 @@ New snapshot was not written. The update flag must be explicitly passed to This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default. Received: -"To write or not to write, -that is the question." +"To write or not to write, +that is the question." `; exports[`pass false toMatchSnapshot New snapshot was not written (single line) 1`] = ` -expect(received).toMatchSnapshot(hint) +expect(received).toMatchSnapshot(hint) Snapshot name: \`New snapshot was not written: (CI) 2\` @@ -193,7 +193,7 @@ New snapshot was not written. The update flag must be explicitly passed to This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default. -Received: "Write me if you can!" +Received: "Write me if you can!" `; exports[`pass false toMatchSnapshot with properties equals false isLineDiffable false 1`] = ` @@ -222,43 +222,43 @@ Snapshot name: \`with properties 1\` `; exports[`pass false toMatchSnapshot with properties equals true 1`] = ` -expect(received).toMatchSnapshot(properties, hint) +expect(received).toMatchSnapshot(properties, hint) Snapshot name: \`with properties: change text value 1\` - Snapshot - 1 -+ Received + 1 ++ Received + 1 Object { "id": "abcdef", - "text": "snapshot", -+ "text": "received", ++ "text": "received", "type": "ADD_ITEM", } `; exports[`pass false toThrowErrorMatchingInlineSnapshot with snapshot 1`] = ` -expect(received).toThrowErrorMatchingInlineSnapshot(snapshot) +expect(received).toThrowErrorMatchingInlineSnapshot(snapshot) Snapshot name: \`with snapshot 1\` Snapshot: "inline snapshot" -Received: "received" +Received: "received" `; exports[`printSnapshotAndReceived backtick single line expected and received 1`] = ` Snapshot: "var foo = \`backtick\`;" -Received: "var foo = tag\`backtick\`;" +Received: "var foo = tag\`backtick\`;" `; exports[`printSnapshotAndReceived empty string expected and received single line 1`] = ` Snapshot: "" -Received: "single line string" +Received: "single line string" `; exports[`printSnapshotAndReceived empty string received and expected multi line 1`] = ` - Snapshot - 3 -+ Received + 0 ++ Received + 0 - multi - line @@ -267,31 +267,31 @@ exports[`printSnapshotAndReceived empty string received and expected multi line exports[`printSnapshotAndReceived escape backslash in multi line string 1`] = ` - Snapshot - 1 -+ Received + 2 ++ Received + 2 - Forward / slash and back \\ slash -+ Forward / slash -+ Back \\ slash ++ Forward / slash ++ Back \\ slash `; exports[`printSnapshotAndReceived escape backslash in single line string 1`] = ` Snapshot: "forward / slash and back \\\\ slash" -Received: "Forward / slash and back \\\\ slash" +Received: "Forward / slash and back \\\\ slash" `; exports[`printSnapshotAndReceived escape double quote marks in string 1`] = ` Snapshot: "What does \\"oobleck\\" mean?" -Received: "What does \\"ewbleck\\" mean?" +Received: "What does \\"ewbleck\\" mean?" `; exports[`printSnapshotAndReceived escape regexp 1`] = ` Snapshot: /\\\\\\\\\\("\\)/g -Received: /\\\\\\\\\\("\\)/ +Received: /\\\\\\\\\\("\\)/ `; exports[`printSnapshotAndReceived expand false 1`] = ` - Snapshot - 1 -+ Received + 3 ++ Received + 3 @@ -12,7 +12,9 @@ ? "number" @@ -300,15 +300,15 @@ exports[`printSnapshotAndReceived expand false 1`] = ` : T extends undefined ? "undefined" - : T extends Function ? "function" : "object"; -+ : T extends Function -+ ? "function" -+ : "object"; ++ : T extends Function ++ ? "function" ++ : "object"; ↵ `; exports[`printSnapshotAndReceived expand true 1`] = ` - Snapshot - 1 -+ Received + 3 ++ Received + 3 type TypeName = T extends string ? "string" : @@ -327,93 +327,93 @@ exports[`printSnapshotAndReceived expand true 1`] = ` : T extends undefined ? "undefined" - : T extends Function ? "function" : "object"; -+ : T extends Function -+ ? "function" -+ : "object"; ++ : T extends Function ++ ? "function" ++ : "object"; ↵ `; exports[`printSnapshotAndReceived fallback to line diff 1`] = ` - Snapshot - 1 -+ Received + 8 ++ Received + 8 -+ ====================================options===================================== -+ parsers: ["flow", "typescript"] -+ printWidth: 80 -+ | printWidth -+ =====================================input====================================== ++ ====================================options===================================== ++ parsers: ["flow", "typescript"] ++ printWidth: 80 ++ | printWidth ++ =====================================input====================================== [...a, ...b,]; [...a, ...b]; - ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -+ -+ =====================================output===================================== ++ ++ =====================================output===================================== [...a, ...b]; [...a, ...b]; -+ ================================================================================ ++ ================================================================================ `; exports[`printSnapshotAndReceived has no common after clean up chaff array 1`] = ` - Snapshot - 2 -+ Received + 2 ++ Received + 2 Array [ - "delete", - "two", -+ "insert", -+ "2", ++ "insert", ++ "2", ] `; exports[`printSnapshotAndReceived has no common after clean up chaff string single line 1`] = ` Snapshot: "delete" -Received: "insert" +Received: "insert" `; exports[`printSnapshotAndReceived isLineDiffable false asymmetric matcher 1`] = ` Snapshot: null -Received: Object { - "asymmetricMatch": [Function], -} +Received: Object { + "asymmetricMatch": [Function], +} `; exports[`printSnapshotAndReceived isLineDiffable false boolean 1`] = ` Snapshot: true -Received: false +Received: false `; exports[`printSnapshotAndReceived isLineDiffable false date 1`] = ` Snapshot: 2019-09-19T00:00:00.000Z -Received: 2019-09-20T00:00:00.000Z +Received: 2019-09-20T00:00:00.000Z `; exports[`printSnapshotAndReceived isLineDiffable false error 1`] = ` Snapshot: [Error: Cannot spread fragment "NameAndAppearances" within itself.] -Received: [Error: Cannot spread fragment "NameAndAppearancesAndFriends" within itself.] +Received: [Error: Cannot spread fragment "NameAndAppearancesAndFriends" within itself.] `; exports[`printSnapshotAndReceived isLineDiffable false function 1`] = ` Snapshot: undefined -Received: [Function] +Received: [Function] `; exports[`printSnapshotAndReceived isLineDiffable false number 1`] = ` Snapshot: -0 -Received: NaN +Received: NaN `; exports[`printSnapshotAndReceived isLineDiffable true array 1`] = ` - Snapshot - 0 -+ Received + 2 ++ Received + 2 Array [ Object { -+ "_id": "b14680dec683e744ada1f2fe08614086", ++ "_id": "b14680dec683e744ada1f2fe08614086", "code": 4011, "weight": 2.13, }, Object { -+ "_id": "7fc63ff01769c4fa7d9279e97e307829", ++ "_id": "7fc63ff01769c4fa7d9279e97e307829", "code": 4019, "count": 4, }, @@ -422,15 +422,15 @@ exports[`printSnapshotAndReceived isLineDiffable true array 1`] = ` exports[`printSnapshotAndReceived isLineDiffable true object 1`] = ` - Snapshot - 2 -+ Received + 3 ++ Received + 3 Object { "props": Object { - "className": "logo", - "src": "/img/jest.png", -+ "alt": "Jest logo", -+ "class": "logo", -+ "src": "/img/jest.svg", ++ "alt": "Jest logo", ++ "class": "logo", ++ "src": "/img/jest.svg", }, "type": "img", } @@ -438,95 +438,95 @@ exports[`printSnapshotAndReceived isLineDiffable true object 1`] = ` exports[`printSnapshotAndReceived isLineDiffable true single line expected and multi line received 1`] = ` - Snapshot - 1 -+ Received + 3 ++ Received + 3 - Array [] -+ Array [ -+ 0, -+ ] ++ Array [ ++ 0, ++ ] `; exports[`printSnapshotAndReceived isLineDiffable true single line expected and received 1`] = ` - Snapshot - 1 -+ Received + 1 ++ Received + 1 - Array [] -+ Object {} ++ Object {} `; exports[`printSnapshotAndReceived multi line small change in one line and other is unchanged 1`] = ` - Snapshot - 1 -+ Received + 1 ++ Received + 1 - There is no route defined for key 'Settings'. -+ There is no route defined for key Settings. ++ There is no route defined for key Settings. Must be one of: 'Home' `; exports[`printSnapshotAndReceived multi line small changes 1`] = ` - Snapshot - 7 -+ Received + 7 ++ Received + 7 - 69 | -+ 68 | ++ 68 | - 70 | test('assert.doesNotThrow', () => { -+ 69 | test('assert.doesNotThrow', () => { ++ 69 | test('assert.doesNotThrow', () => { - > 71 | assert.doesNotThrow(() => { -+ > 70 | assert.doesNotThrow(() => { ++ > 70 | assert.doesNotThrow(() => { | ^ - 72 | throw Error('err!'); -+ 71 | throw Error('err!'); ++ 71 | throw Error('err!'); - 73 | }); -+ 72 | }); ++ 72 | }); - 74 | }); -+ 73 | }); ++ 73 | }); - at Object.doesNotThrow (__tests__/assertionError.test.js:71:10) -+ at Object.doesNotThrow (__tests__/assertionError.test.js:70:10) ++ at Object.doesNotThrow (__tests__/assertionError.test.js:70:10) `; exports[`printSnapshotAndReceived single line large changes 1`] = ` Snapshot: "Array length must be a finite positive integer" -Received: "Invalid array length" +Received: "Invalid array length" `; exports[`printSnapshotAndReceived without serialize backtick single line expected and multi line received 1`] = ` - Snapshot - 1 -+ Received + 2 ++ Received + 2 - var foo = \`backtick\`; -+ var foo = \`back -+ tick\`; ++ var foo = \`back ++ tick\`; `; exports[`printSnapshotAndReceived without serialize backtick single line expected and received 1`] = ` - Snapshot - 1 -+ Received + 1 ++ Received + 1 - var foo = \`backtick\`; -+ var foo = \`back\${x}tick\`; ++ var foo = \`back\${x}tick\`; `; exports[`printSnapshotAndReceived without serialize has no common after clean up chaff multi line 1`] = ` - Snapshot - 2 -+ Received + 2 ++ Received + 2 - delete - two -+ insert -+ 2 ++ insert ++ 2 `; exports[`printSnapshotAndReceived without serialize has no common after clean up chaff single line 1`] = ` - Snapshot - 1 -+ Received + 1 ++ Received + 1 - delete -+ insert ++ insert `; exports[`printSnapshotAndReceived without serialize prettier/pull/5590 1`] = ` - Snapshot - 1 -+ Received + 1 ++ Received + 1 @@ -4,8 +4,8 @@ | printWidth @@ -535,7 +535,7 @@ exports[`printSnapshotAndReceived without serialize prettier/pull/5590 1`] = ` =====================================output===================================== - <i"John "ShotGun" Nelson" /> -+ <i'John "ShotGun" Nelson' /> ++ <i'John "ShotGun" Nelson' /> ================================================================================ `; diff --git a/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts b/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts index 8ca3c12a33fe..45d265530e31 100644 --- a/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts +++ b/packages/jest-snapshot/src/__tests__/printSnapshot.test.ts @@ -31,7 +31,7 @@ import { const aOpenForeground1 = styles.magenta.open; const aOpenBackground1 = styles.bgYellowBright.open; -const bOpenForeground1 = styles.green.open; +const bOpenForeground1 = styles.cyan.open; const bOpenBackground1 = styles.bgWhiteBright.open; const aOpenForeground2 = styles.color.ansi256.ansi256(aForeground2); @@ -79,9 +79,7 @@ const convertAnsi = (val: string): string => { case styles.dim.close: return ''; - case bOpenForeground1: - case bOpenForeground2: - case bOpenForeground3: + case styles.green.open: return ''; case aOpenForeground1: case aOpenForeground2: @@ -89,8 +87,13 @@ const convertAnsi = (val: string): string => { return ''; case styles.red.open: return ''; + case bOpenForeground1: + case bOpenForeground2: + case bOpenForeground3: + return ''; // teal/cyan/aqua case styles.yellow.open: return ''; + case styles.cyan.close: case styles.green.close: case styles.magenta.close: case styles.red.close: @@ -159,7 +162,7 @@ describe('chalk', () => { const expected0 = '- delete 1 \n common 2 \n+ insert 0'; const expected1 = - '- delete 1 \n common 2 \n+ insert 0'; + '- delete 1 \n common 2 \n+ insert 0'; test('level 0', () => { const chalkInstance = new chalk.Instance({level: 0}); diff --git a/packages/jest-snapshot/src/colors.ts b/packages/jest-snapshot/src/colors.ts index eb4273123354..5f62153568d9 100644 --- a/packages/jest-snapshot/src/colors.ts +++ b/packages/jest-snapshot/src/colors.ts @@ -10,13 +10,13 @@ export const aForeground2 = 90; export const aBackground2 = 225; -export const bForeground2 = 22; -export const bBackground2 = 194; +export const bForeground2 = 23; +export const bBackground2 = 195; export type RGB = [number, number, number]; export const aForeground3: RGB = [0x80, 0, 0x80]; export const aBackground3: RGB = [0xff, 0xd7, 0xff]; -export const bForeground3: RGB = [0, 0x5f, 0]; -export const bBackground3: RGB = [0xd7, 0xff, 0xd7]; +export const bForeground3: RGB = [0, 0x5f, 0x5f]; +export const bBackground3: RGB = [0xd7, 0xff, 0xff]; diff --git a/packages/jest-snapshot/src/printSnapshot.ts b/packages/jest-snapshot/src/printSnapshot.ts index 74cfc27b391f..6758d200db6f 100644 --- a/packages/jest-snapshot/src/printSnapshot.ts +++ b/packages/jest-snapshot/src/printSnapshot.ts @@ -76,7 +76,7 @@ export const getReceivedColorForChalkInstance = ( return chalkInstance.ansi256(bForeground2).bgAnsi256(bBackground2); } - return chalkInstance.green.bgWhiteBright; + return chalkInstance.cyan.bgWhiteBright; // also known as teal }; export const aSnapshotColor = getSnapshotColorForChalkInstance(chalk);