Don't wrap multiline strings with double quotes

[thymikee]

Summary

This is a breaking change and needs updating snapshot version to v2 (v1 was introduced in Jest 19)

This PR treats multiline strings specially and wrap them in back-ticks instead of double quotes.
pretty-format strips extra back-ticks just before returning the value. This is because we wrap whole expression in such back-ticks when writing a snapshot.

Fixes #4179.

Test plan

Updated the snapshots accordingly. This way we can discuss easier on whether this change is worth breaking next Jest version.

cc @cpojer @aaronabramov @vjeux @rogeliog

[thymikee]

💩, it's so much more readable

[aaronabramov]

can we not merge it for a few days? :) a want to land my diff to update jest in www first (i already have a diff open for it), with this PR my diff can explode to many hundred thousand lines changed :D

[thymikee]

Sure, I'll need to figure out what's wrong with these color tags on CI :<

[pedrottimark]

The example of object property value which is a multiline string looks 👍 to me.

Could the snapshot module take responsibility to strip surrounding backticks when needed?

Stripping them in pretty-format might be confusing outside of snapshots. For example:

• prettyFormat('one line') === '"one line"' explicitly represents a string value
• prettyFormat('two\nlines') === 'two\nlines' has neither quotes nor backticks?

[thymikee]

@pedrottimark you're right about stripping backticks in snapshots. I'll iterate over tomorrow. Thanks for your input!

[aaronabramov]

just a heads up, i landed my www diff! so it's good to go

[thymikee]

congrats! 🎉

[cpojer]

Let's give it another day, CI is failing also fyi.

[thymikee]

Turned out that not escaping backslashes (this code was previously ? '`' + val + '`') introduced differences in color output of child processes. ¯_(ツ)_/¯
cc @aaronabramov

[thymikee]

Ok, looks like the pretty-format and jest-snapshot are not linked properly on Windows. See #4135

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@f7b25b6). Click here to learn what that means.
The diff coverage is 100%.

@@           Coverage Diff            @@
##             master   #4183   +/-   ##
========================================
  Coverage          ?   60.2%           
========================================
  Files             ?     191           
  Lines             ?    6768           
  Branches          ?       6           
========================================
  Hits              ?    4075           
  Misses            ?    2690           
  Partials          ?       3

Impacted Files	Coverage Δ
packages/pretty-format/src/index.js	97.7% <100%> (ø)
packages/jest-snapshot/src/utils.js	100% <100%> (ø)

---

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 f7b25b6...7dc5693. Read the comment docs.

[thymikee]

BTW, we can postpone this PR to anytime later, it's not a blocker for me anymore. Nevertheless, I'd still like to land it one day.

[cpojer]

Alright, I think I really want us to adopt this and have a new version of the snapshot format for 21, however I think it would be great if we could do a simpler rollout of the new snapshot format for 21:

How about for the current version of snapshots, we support printing the quotes, but if a snapshot changes, any update to that individual file will update to the new snapshot version? That way, Jest 21 can support the current format, and for all new and updated snapshots it will support the new format. I really think that we should prevent churning users when making an upgrade, and it will also make it much easier to upgrade Jest on large codebases. @thymikee what do you think? Could you make this change?

[thymikee]

Hopefully I'll find some time for this by the end of the week(end)

[pedrottimark]

Really looking forward to this!

Does first branch of ternary need to escape backticks as other branch escapes double quotes:

  if (typeOf === 'string') {
    return /\r\n?|\n/gm.test(val)
      ? '`' + val.replace(/\\/g, '\\$&') + '`'
      : '"' + val.replace(/"|\\/g, '\\$&') + '"';
  }

[thymikee]

I remember wrapping it because I needed a way to determine multi-line string while unescaping in jest-snapshot.

[pedrottimark]

Indeed, I forgot that jest-snapshot already escapes backticks in https://github.com/facebook/jest/blob/master/packages/jest-snapshot/src/utils.js#L147-L149

Thinking about it again, hopefully with a clearer mind, I think what I should have meant to ask is when pretty-format is used for purpose other than to serialize a snapshot (for example, by jest-diff when an assertion fails) doesn’t it need to escape backticks that occur in multi line strings just as it escapes double quotes that occur in single line strings? If the answer is yes, then it becomes necessary for jest-snapshot not to double-escape them.

[pedrottimark]

@thymikee when you come back to this pull request, I noticed while studying trailing newlines in jest-diff that for correct comparison of multiline strings, it might become necessary to trim exactly the one leading and trailing newline added when snapshot was written in:

https://github.com/facebook/jest/blob/master/packages/jest-snapshot/src/utils.js#L132-L133

instead of unrestricted String.trim method in:

https://github.com/facebook/jest/blob/master/packages/jest-snapshot/src/index.js#L89-L90

[cpojer]

I still want this but I'm gonna close it for now because nobody is actively working on it. Let's create a new PR if we make this change.

[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.