Human-readable colors for jest-matchers snapshots (#3119)

* Human-readable colors for jest-matchers snapshots

* Use ConvertAnsi pretty-format plugin as snapshotSerializer

* Convert ansi escapes in all snapshots

package.json

@@ -1,6 +1,8 @@
 {
   "private": true,
   "devDependencies": {
+    "ansi-regex": "^2.0.0",
+    "ansi-styles": "^3.0.0",
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
     "babel-plugin-syntax-trailing-function-commas": "^6.13.0",
@@ -84,6 +86,9 @@
       "^.+\\.js$": "<rootDir>/packages/babel-jest"
     },
     "setupTestFrameworkScriptFile": "<rootDir>/testSetupFile.js",
+    "snapshotSerializers": [
+      "<rootDir>/packages/pretty-format/build/plugins/ConvertAnsi.js"
+    ],
     "testEnvironment": "./packages/jest-environment-node",
     "testPathIgnorePatterns": [
       "/node_modules/",

packages/jest-cli/src/lib/__tests__/__snapshots__/formatTestNameByPattern-test.js.snap

@@ -1,27 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`for multiline test name returns test name with highlighted pattern and replaced line breaks 1`] = `"[2mshould⏎ [22m[0mname[0m[2m the ⏎function you at...[22m"`;
+exports[`for multiline test name returns test name with highlighted pattern and replaced line breaks 1`] = `"<dim>should⏎ </>name</><dim> the ⏎function you at..."`;
 
-exports[`for multiline test name returns test name with highlighted pattern and replaced line breaks 2`] = `"[2mshould⏎ [22m[0mname[0m[2m the ⏎function you at...[22m"`;
+exports[`for multiline test name returns test name with highlighted pattern and replaced line breaks 2`] = `"<dim>should⏎ </>name</><dim> the ⏎function you at..."`;
 
-exports[`for multiline test name returns test name with highlighted pattern and replaced line breaks 3`] = `"[2mshould⏎ [22m[0mname[0m[2m the ⏎function you at...[22m"`;
+exports[`for multiline test name returns test name with highlighted pattern and replaced line breaks 3`] = `"<dim>should⏎ </>name</><dim> the ⏎function you at..."`;
 
-exports[`for one line test name pattern in the middle test name with cutted tail and cutted highlighted pattern 1`] = `"[2mshould [22m[0mnam...[0m"`;
+exports[`for one line test name pattern in the middle test name with cutted tail and cutted highlighted pattern 1`] = `"<dim>should </>nam...</>"`;
 
-exports[`for one line test name pattern in the middle test name with cutted tail and highlighted pattern 1`] = `"[2mshould [22m[0mname[0m[2m the functi...[22m"`;
+exports[`for one line test name pattern in the middle test name with cutted tail and highlighted pattern 1`] = `"<dim>should </>name</><dim> the functi..."`;
 
-exports[`for one line test name pattern in the middle test name with highlighted cutted 1`] = `"[2msho[22m[0m...[0m"`;
+exports[`for one line test name pattern in the middle test name with highlighted cutted 1`] = `"<dim>sho</>...</>"`;
 
-exports[`for one line test name pattern in the middle test name with highlighted pattern returns 1`] = `"[2mshould [22m[0mname[0m[2m the function you attach[22m"`;
+exports[`for one line test name pattern in the middle test name with highlighted pattern returns 1`] = `"<dim>should </>name</><dim> the function you attach"`;
 
-exports[`for one line test name pattern in the tail returns test name with cutted tail and cutted highlighted pattern 1`] = `"[2mshould name the function you [22m[0ma...[0m"`;
+exports[`for one line test name pattern in the tail returns test name with cutted tail and cutted highlighted pattern 1`] = `"<dim>should name the function you </>a...</>"`;
 
-exports[`for one line test name pattern in the tail returns test name with highlighted cutted 1`] = `"[2msho[22m[0m...[0m"`;
+exports[`for one line test name pattern in the tail returns test name with highlighted cutted 1`] = `"<dim>sho</>...</>"`;
 
-exports[`for one line test name pattern in the tail returns test name with highlighted pattern 1`] = `"[2mshould name the function you [22m[0mattach[0m"`;
+exports[`for one line test name pattern in the tail returns test name with highlighted pattern 1`] = `"<dim>should name the function you </>attach</>"`;
 
-exports[`for one line test name with pattern in the head returns test name with cutted tail and cutted highlighted pattern 1`] = `"[0mshoul...[0m"`;
+exports[`for one line test name with pattern in the head returns test name with cutted tail and cutted highlighted pattern 1`] = `"</>shoul...</>"`;
 
-exports[`for one line test name with pattern in the head returns test name with cutted tail and highlighted pattern 1`] = `"[0mshould[0m[2m name the function yo...[22m"`;
+exports[`for one line test name with pattern in the head returns test name with cutted tail and highlighted pattern 1`] = `"</>should</><dim> name the function yo..."`;
 
-exports[`for one line test name with pattern in the head returns test name with highlighted pattern 1`] = `"[0mshould[0m[2m name the function you attach[22m"`;
+exports[`for one line test name with pattern in the head returns test name with highlighted pattern 1`] = `"</>should</><dim> name the function you attach"`;

packages/jest-cli/src/lib/__tests__/__snapshots__/highlight-test.js.snap

@@ -1,77 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`dims everything when there is no match 1`] = `"[2mjest-cli/__tests__/watch-test.js[22m"`;
+exports[`dims everything when there is no match 1`] = `"<dim>jest-cli/__tests__/watch-test.js"`;
 
-exports[`dims everything when there is no match 2`] = `"[2m...t-cli/__tests__/watch-test.js[22m"`;
+exports[`dims everything when there is no match 2`] = `"<dim>...t-cli/__tests__/watch-test.js"`;
 
-exports[`dims everything when there is no match 3`] = `"[2m.../__tests__/watch-test.js[22m"`;
+exports[`dims everything when there is no match 3`] = `"<dim>.../__tests__/watch-test.js"`;
 
-exports[`dims everything when there is no match 4`] = `"[2m...sts__/watch-test.js[22m"`;
+exports[`dims everything when there is no match 4`] = `"<dim>...sts__/watch-test.js"`;
 
-exports[`dims everything when there is no match 5`] = `"[2m...watch-test.js[22m"`;
+exports[`dims everything when there is no match 5`] = `"<dim>...watch-test.js"`;
 
-exports[`dims everything when there is no match 6`] = `"[2m...-test.js[22m"`;
+exports[`dims everything when there is no match 6`] = `"<dim>...-test.js"`;
 
-exports[`dims everything when there is no match 7`] = `"[2m....js[22m"`;
+exports[`dims everything when there is no match 7`] = `"<dim>....js"`;
 
-exports[`dims everything when there is no match 8`] = `"[2m./watch-test.js[22m"`;
+exports[`dims everything when there is no match 8`] = `"<dim>./watch-test.js"`;
 
-exports[`highlight the trimmed part when there is only a rootDir match 1`] = `"[2mjest-cli/__tests__/watch-test.js[22m"`;
+exports[`highlight the trimmed part when there is only a rootDir match 1`] = `"<dim>jest-cli/__tests__/watch-test.js"`;
 
-exports[`highlight the trimmed part when there is only a rootDir match 2`] = `"[0m...[0m[2mt-cli/__tests__/watch-test.js[22m"`;
+exports[`highlight the trimmed part when there is only a rootDir match 2`] = `"</>...</><dim>t-cli/__tests__/watch-test.js"`;
 
-exports[`highlight the trimmed part when there is only a rootDir match 3`] = `"[0m...[0m[2m/__tests__/watch-test.js[22m"`;
+exports[`highlight the trimmed part when there is only a rootDir match 3`] = `"</>...</><dim>/__tests__/watch-test.js"`;
 
-exports[`highlight the trimmed part when there is only a rootDir match 4`] = `"[0m...[0m[2msts__/watch-test.js[22m"`;
+exports[`highlight the trimmed part when there is only a rootDir match 4`] = `"</>...</><dim>sts__/watch-test.js"`;
 
-exports[`highlight the trimmed part when there is only a rootDir match 5`] = `"[0m...[0m[2mwatch-test.js[22m"`;
+exports[`highlight the trimmed part when there is only a rootDir match 5`] = `"</>...</><dim>watch-test.js"`;
 
-exports[`highlight the trimmed part when there is only a rootDir match 6`] = `"[0m...[0m[2m-test.js[22m"`;
+exports[`highlight the trimmed part when there is only a rootDir match 6`] = `"</>...</><dim>-test.js"`;
 
-exports[`highlight the trimmed part when there is only a rootDir match 7`] = `"[0m...[0m[2m.js[22m"`;
+exports[`highlight the trimmed part when there is only a rootDir match 7`] = `"</>...</><dim>.js"`;
 
-exports[`highlight the trimmed part when there is only a rootDir match 8`] = `"[0m./[0m[2mwatch-test.js[22m"`;
+exports[`highlight the trimmed part when there is only a rootDir match 8`] = `"</>./</><dim>watch-test.js"`;
 
-exports[`highlights everything when there is a full match 1`] = `"[0mjest-cli/__tests__/watch-test.js[0m"`;
+exports[`highlights everything when there is a full match 1`] = `"</>jest-cli/__tests__/watch-test.js</>"`;
 
-exports[`highlights everything when there is a full match 2`] = `"[0m...t-cli/__tests__/watch-test.js[0m"`;
+exports[`highlights everything when there is a full match 2`] = `"</>...t-cli/__tests__/watch-test.js</>"`;
 
-exports[`highlights everything when there is a full match 3`] = `"[0m.../__tests__/watch-test.js[0m"`;
+exports[`highlights everything when there is a full match 3`] = `"</>.../__tests__/watch-test.js</>"`;
 
-exports[`highlights everything when there is a full match 4`] = `"[0m...sts__/watch-test.js[0m"`;
+exports[`highlights everything when there is a full match 4`] = `"</>...sts__/watch-test.js</>"`;
 
-exports[`highlights everything when there is a full match 5`] = `"[0m...watch-test.js[0m"`;
+exports[`highlights everything when there is a full match 5`] = `"</>...watch-test.js</>"`;
 
-exports[`highlights everything when there is a full match 6`] = `"[0m...-test.js[0m"`;
+exports[`highlights everything when there is a full match 6`] = `"</>...-test.js</>"`;
 
-exports[`highlights everything when there is a full match 7`] = `"[0m....js[0m"`;
+exports[`highlights everything when there is a full match 7`] = `"</>....js</>"`;
 
-exports[`highlights everything when there is a full match 8`] = `"[0m./watch-test.js[0m"`;
+exports[`highlights everything when there is a full match 8`] = `"</>./watch-test.js</>"`;
 
-exports[`highlights part of file name when there is a partially match of the file name 1`] = `"[2mjest-cli/__tests__/[22m[0mwatch[0m[2m-test.js[22m"`;
+exports[`highlights part of file name when there is a partially match of the file name 1`] = `"<dim>jest-cli/__tests__/</>watch</><dim>-test.js"`;
 
-exports[`highlights part of file name when there is a partially match of the file name 2`] = `"[2m...t-cli/__tests__/[22m[0mwatch[0m[2m-test.js[22m"`;
+exports[`highlights part of file name when there is a partially match of the file name 2`] = `"<dim>...t-cli/__tests__/</>watch</><dim>-test.js"`;
 
-exports[`highlights part of file name when there is a partially match of the file name 3`] = `"[2m.../__tests__/[22m[0mwatch[0m[2m-test.js[22m"`;
+exports[`highlights part of file name when there is a partially match of the file name 3`] = `"<dim>.../__tests__/</>watch</><dim>-test.js"`;
 
-exports[`highlights part of file name when there is a partially match of the file name 4`] = `"[2m...sts__/[22m[0mwatch[0m[2m-test.js[22m"`;
+exports[`highlights part of file name when there is a partially match of the file name 4`] = `"<dim>...sts__/</>watch</><dim>-test.js"`;
 
-exports[`highlights part of file name when there is a partially match of the file name 5`] = `"[2m...[22m[0mwatch[0m[2m-test.js[22m"`;
+exports[`highlights part of file name when there is a partially match of the file name 5`] = `"<dim>...</>watch</><dim>-test.js"`;
 
-exports[`highlights part of file name when there is a partially match of the file name 6`] = `"[0m...[0m[2m-test.js[22m"`;
+exports[`highlights part of file name when there is a partially match of the file name 6`] = `"</>...</><dim>-test.js"`;
 
-exports[`highlights part of file name when there is a partially match of the file name 7`] = `"[0m...[0m[2m.js[22m"`;
+exports[`highlights part of file name when there is a partially match of the file name 7`] = `"</>...</><dim>.js"`;
 
-exports[`highlights part of file name when there is a partially match of the file name 8`] = `"[2m./[22m[0mwatch[0m[2m-test.js[22m"`;
+exports[`highlights part of file name when there is a partially match of the file name 8`] = `"<dim>./</>watch</><dim>-test.js"`;
 
-exports[`highlights the trimmed part there is a non visible match 1`] = `"[0m...t-cli[0m[2m/__tests__/watch-test.js[22m"`;
+exports[`highlights the trimmed part there is a non visible match 1`] = `"</>...t-cli</><dim>/__tests__/watch-test.js"`;
 
-exports[`highlights the trimmed part there is a non visible match 2`] = `"[0m...[0m[2m/__tests__/watch-test.js[22m"`;
+exports[`highlights the trimmed part there is a non visible match 2`] = `"</>...</><dim>/__tests__/watch-test.js"`;
 
-exports[`highlights the trimmed part there is a non visible match 3`] = `"[0m...[0m[2msts__/watch-test.js[22m"`;
+exports[`highlights the trimmed part there is a non visible match 3`] = `"</>...</><dim>sts__/watch-test.js"`;
 
-exports[`highlights the trimmed part there is a non visible match 4`] = `"[0m...[0m[2mwatch-test.js[22m"`;
+exports[`highlights the trimmed part there is a non visible match 4`] = `"</>...</><dim>watch-test.js"`;
 
-exports[`highlights the trimmed part there is a non visible match 5`] = `"[0m...[0m[2m-test.js[22m"`;
+exports[`highlights the trimmed part there is a non visible match 5`] = `"</>...</><dim>-test.js"`;
 
-exports[`highlights the trimmed part there is a non visible match 6`] = `"[0m...[0m[2m.js[22m"`;
+exports[`highlights the trimmed part there is a non visible match 6`] = `"</>...</><dim>.js"`;

packages/jest-cli/src/reporters/__tests__/__snapshots__/utils-test.js.snap

@@ -1,32 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`trimAndFormatPath() does not trim anything 1`] = `"[2m1234567890/1234567890/[22m[1m1234.js[22m"`;
+exports[`trimAndFormatPath() does not trim anything 1`] = `"<dim>1234567890/1234567890/<bold>1234.js"`;
 
-exports[`trimAndFormatPath() split at the path.sep index 1`] = `"[2m.../[22m[1m1234.js[22m"`;
+exports[`trimAndFormatPath() split at the path.sep index 1`] = `"<dim>.../<bold>1234.js"`;
 
-exports[`trimAndFormatPath() trims dirname (longer line width) 1`] = `"[2m...890/1234567890/[22m[1m1234.js[22m"`;
+exports[`trimAndFormatPath() trims dirname (longer line width) 1`] = `"<dim>...890/1234567890/<bold>1234.js"`;
 
-exports[`trimAndFormatPath() trims dirname 1`] = `"[2m...234567890/[22m[1m1234.js[22m"`;
+exports[`trimAndFormatPath() trims dirname 1`] = `"<dim>...234567890/<bold>1234.js"`;
 
-exports[`trimAndFormatPath() trims dirname and basename 1`] = `"[1m...1234.js[22m"`;
+exports[`trimAndFormatPath() trims dirname and basename 1`] = `"<bold>...1234.js"`;
 
 exports[`wrapAnsiString() returns the string unaltered if given a terminal width of zero 1`] = `"This string shouldn't cause you any trouble"`;
 
 exports[`wrapAnsiString() returns the string unaltered if given a terminal width of zero 2`] = `"This string shouldn't cause you any trouble"`;
 
 exports[`wrapAnsiString() wraps a long string containing ansi chars 1`] = `
-"abcde [31m[1mred-
-bold[22m[39m 12344
-56[2mbcd[22m 123t
+"abcde <red><bold>red-
+bold</> 12344
+56<dim>bcd 123t
 tttttththt
 hththththt
 hththththt
 hththththt
 hthththtet
 etetetette
 tetetetete
-tetete[4m[1mstnh
-snthsnth[22m[24mss
+tetete<bold>stnh
+snthsnthss
 ot"
 `;
 

packages/jest-config/src/__tests__/__snapshots__/normalize-test.js.snap

@@ -1,58 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Upgrade help logs a warning when \`scriptPreprocessor\` and/or \`preprocessorIgnorePatterns\` are used 1`] = `
-"[33m[1m[1m●[1m Deprecation Warning[22m:
+"<bold><bold>●<bold> Deprecation Warning:
 
-  Option [1m\\"preprocessorIgnorePatterns\\"[22m was replaced by [1m\\"transformIgnorePatterns\\"[22m, which support multiple preprocessors.
+  Option <bold>\\"preprocessorIgnorePatterns\\" was replaced by <bold>\\"transformIgnorePatterns\\", which support multiple preprocessors.
 
   Jest now treats your current configuration as:
   {
-    [1m\\"transformIgnorePatterns\\"[22m: [1m[\\"bar/baz\\", \\"qux/quux\\"][22m
+    <bold>\\"transformIgnorePatterns\\": <bold>[\\"bar/baz\\", \\"qux/quux\\"]
   }
 
   Please update your configuration.
 
-  [1mConfiguration Documentation:[22m
+  <bold>Configuration Documentation:
   https://facebook.github.io/jest/docs/configuration.html
-[39m"
+</>"
 `;
 
 exports[`preset throws when preset not found 1`] = `
-"[31m[1m[1m● [1mValidation Error[22m:
+"<red><bold><bold>● <bold>Validation Error:
 
-  Preset [1mdoesnt-exist[22m not found.
+  Preset <bold>doesnt-exist not found.
 
-  [1mConfiguration Documentation:[22m
+  <bold>Configuration Documentation:
   https://facebook.github.io/jest/docs/configuration.html
-[39m"
+</>"
 `;
 
 exports[`rootDir throws if the config is missing a rootDir property 1`] = `
-"[31m[1m[1m● [1mValidation Error[22m:
+"<red><bold><bold>● <bold>Validation Error:
 
-  Configuration option [1mrootDir[22m must be specified.
+  Configuration option <bold>rootDir must be specified.
 
-  [1mConfiguration Documentation:[22m
+  <bold>Configuration Documentation:
   https://facebook.github.io/jest/docs/configuration.html
-[39m"
+</>"
 `;
 
 exports[`testEnvironment throws on invalid environment names 1`] = `
-"[31m[1m[1m● [1mValidation Error[22m:
+"<red><bold><bold>● <bold>Validation Error:
 
-  Test environment [1mphantom[22m cannot be found. Make sure the [1mtestEnvironment[22m configuration option points to an existing node module.
+  Test environment <bold>phantom cannot be found. Make sure the <bold>testEnvironment configuration option points to an existing node module.
 
-  [1mConfiguration Documentation:[22m
+  <bold>Configuration Documentation:
   https://facebook.github.io/jest/docs/configuration.html
-[39m"
+</>"
 `;
 
 exports[`testMatch throws if testRegex and testMatch are both specified 1`] = `
-"[31m[1m[1m● [1mValidation Error[22m:
+"<red><bold><bold>● <bold>Validation Error:
 
-  Configuration options [1mtestMatch[22m and [1mtestRegex[22m cannot be used together.
+  Configuration options <bold>testMatch and <bold>testRegex cannot be used together.
 
-  [1mConfiguration Documentation:[22m
+  <bold>Configuration Documentation:
   https://facebook.github.io/jest/docs/configuration.html
-[39m"
+</>"
 `;

packages/jest-diff/src/__tests__/__snapshots__/diff-test.js.snap

@@ -1,34 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`collapses big diffs to patch format 1`] = `
-"[32m- Expected[39m
-[31m+ Received[39m
+"<green>- Expected</>
+<red>+ Received</>
 
-[33m@@ -6,9 +6,9 @@
-[39m[2m     4,[22m
-[2m     5,[22m
-[2m     6,[22m
-[2m     7,[22m
-[2m     8,[22m
-[31m+    10,[39m
-[2m     9,[22m
-[32m-    10,[39m
-[2m   ],[22m
-[2m }[22m"
+@@ -6,9 +6,9 @@
+</><dim>     4,
+<dim>     5,
+<dim>     6,
+<dim>     7,
+<dim>     8,
+<red>+    10,</>
+<dim>     9,
+<green>-    10,</>
+<dim>   ],
+<dim> }"
 `;
 
 exports[`falls back to not call toJSON if objects look identical 1`] = `
-"[2mCompared values serialize to the same structure.
-Printing internal object structure without calling \`toJSON\` instead.[22m
+"<dim>Compared values serialize to the same structure.
+Printing internal object structure without calling \`toJSON\` instead.
 
-[32m- Expected[39m
-[31m+ Received[39m
+<green>- Expected</>
+<red>+ Received</>
 
-[2m [22m [2mObject {[22m
-[32m-[39m [32m  \\"line\\": 1,[39m
-[31m+[39m [31m  \\"line\\": 2,[39m
-[2m [22m [2m  \\"toJSON\\": [Function toJSON],[22m
-[2m [22m [2m}[22m"
+<dim>  <dim>Object {
+<green>-</> <green>  \\"line\\": 1,</>
+<red>+</> <red>  \\"line\\": 2,</>
+<dim>  <dim>  \\"toJSON\\": [Function toJSON],
+<dim>  <dim>}"
 `;
 
-exports[`prints a fallback message if two objects truly look identical 1`] = `"[2mCompared values have no visual difference.[22m"`;
+exports[`prints a fallback message if two objects truly look identical 1`] = `"<dim>Compared values have no visual difference."`;

packages/jest-jasmine2/src/__tests__/__snapshots__/matchers-test.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`matchers proxies matchers to jest-matchers 1`] = `
-"[2mexpect([22m[31mreceived[39m[2m).toBe([22m[32mexpected[39m[2m)[22m
+"<dim>expect(<red>received</><dim>).toBe(<green>expected</><dim>)
 
 Expected value to be (using ===):
-  [32m2[39m
+  <green>2</>
 Received:
-  [31m1[39m"
+  <red>1</>"
 `;