Human-readable colors for jest-matchers snapshots

[thymikee]

Summary

Storing ANSI characters in snapshots of jest-matchers isn't very helpful and adds unnecessary noise, making it harder to review. This is a proposal to change it to something more human-readable like <green> or <red> or </> for color reset sequence.

Test plan

Look at snapshots diff

[thymikee]

cc: @DmitriiAbramov

[wtgtybhertgeghgtwtg]

Why are ansi-regex and ansi-styles added?

[thymikee]

Because I use them in here: https://github.com/facebook/jest/pull/3119/files#diff-5d7e608b44e8080e7491366117a2025fR20
They're also already available through chalk

[cpojer]

Can you make ansi-styles and ansi-regex devDependencies of the top level package.json instead? jest-snapshot should stay here but please use the latest version (19.0.2).

[codecov-io]

Codecov Report

Merging #3119 into master will decrease coverage by 0.2%.
The diff coverage is 0%.

@@            Coverage Diff            @@
##           master   #3119      +/-   ##
=========================================
- Coverage    69.4%   69.2%   -0.21%     
=========================================
  Files         156     157       +1     
  Lines        5514    5530      +16     
  Branches        3       3              
=========================================
  Hits         3827    3827              
- Misses       1686    1702      +16     
  Partials        1       1

Impacted Files	Coverage Δ
packages/pretty-format/src/plugins/ConvertAnsi.js	0% <0%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a8c0a47...2112c92. Read the comment docs.

[cpojer]

Lovely! This makes snapshot files a lot more readable. Can we make this a utility function somewhere and use it for all the matcher snapshots? I think we also do this in other files.

[thymikee]

@kentaromiura advised that it may be a good idea to write a custom snapshotSerializer so we don't have to create new matchers. What do you think @cpojer?

[thymikee]

We pass a string to toMatchSnapshot so we either need to:

1. add a symbol, so we can test for it in the snapshot serializer
2. change nothing and test for ansi characters inside the plugin (which will alter our regular snapshots too)
3. pass whole Error object and test for JestAssertionError in toMatchSnapshot and extract its message if necessary

[cpojer]

I like the idea overall but tagging Jest code with Symbol.for('toThrowErrorMatchingSnapshot') simply to make our own tests better doesn't seem like a great way to go about it :(

[maximderbin]

Wow. That's sweet

[aaronabramov]

i wonder if it would make sense to go the other direction.
Use XML-like tags for coloring our text and then convert them to the weird ANSI sequences. This way we could probably make it more compatible with other platforms (like generating HTML reports)

[rogeliog]

🎉

[jest-bot]

	Warnings
⚠️	Changes were made to package.json, but not to yarn.lock - Perhaps you need to run `yarn install`?

Generated by 🚫 dangerJS

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.