assertSnapshot handles multiline strings incorrectly

[bcheidemann]

Describe the bug

When assertSnapshot is called with a multiline string, the newlines are replaced with the characters \\n making it hard to read multiline snapshots.

Steps to Reproduce

1. Create a test file

// test.ts
Deno.test("Snapshot Test - Multi-Line String", async (t) => {
  await assertSnapshot(t, `
Hello World 1!
Hello World 2!
Hello World 3!`);
});

2. Run deno test test.ts -- -u
3. See resulting snapshot file

// __snapshots__/test.ts.snap
export const snapshot = {};

snapshot[`Snapshot Test - Multi-Line String 1`] = `"\\nHello World 1!\\nHello World 2!\\nHello World 3!"`;

4. Observer the issue

Expected behavior

The snapshot file should be formatted as follows:

// __snapshots__/test.ts.snap
export const snapshot = {};

exports[`Snapshot Test - Multi-Line String 1`] = `
"
Hello World 1!
Hello World 2!
Hello World 3!
"
`;

Environment

• OS: [e.g. Ubuntu 20.04, MacOS 11]
• deno version: 1.21
• std version: 0.136.0

Workaround

The current workaround is to write your test file like this:

// test.ts
Deno.test("Snapshot Test - Multi-Line String", async (t) => {
  await assertSnapshot(t, `
Hello World 1!
Hello World 2!
Hello World 3!`.spilt("\n"));
});

Which will result in more readable output:

// __snapshots__/test.ts.snap
export const snapshot = {};

snapshot[`Snapshot Test - Multi-Line String 1`] = `
[
  "",
  "Hello World 1!",
  "Hello World 2!",
  "Hello World 3!",
]
`;

[oscarotero]

I have the same problem. I was expecting multiline strings were stored with template literals (like Jest), so it's more easy to detect changes and see git diff.

I've also detected differences between Windows and Unix/Macos due endline (\n vs \r\n) but not sure if this is a bug or is the desired behavior.

[bcheidemann]

I have the same problem. I was expecting multiline strings were stored with template literals (like Jest), so it's more easy to detect changes and see git diff.

I've also detected differences between Windows and Unix/Macos due endline (\n vs \r\n) but not sure if this is a bug or is the desired behavior.

I would expect that (within reason) if you run the same code, it should produce the same output on all platforms.

Are you able to produce different snapshot output with the same code on MacOS and Windows? If so, could you share the code and the output it produces for each platform?

[oscarotero]

I saw this problem when I was porting the tests of Lume (a SSG) to snapshots. You can see here the github action with the error: https://github.com/lumeland/lume/runs/6140674360?check_suite_focus=true

And was able to fix it with a replaceAll function: https://github.com/lumeland/lume/commit/f3f29787ba8e6c739f2443a8e116df6b67734316

But I'm not sure if the problem is the snapshot. Lume reads the file content of the source files with Deno.readTextFile() so maybe the problem is that this function behaves differently in Windows and MacOS/Linux?

[bcheidemann]

I saw this problem when I was porting the tests of Lume (a SSG) to snapshots. You can see here the github action with the error: https://github.com/lumeland/lume/runs/6140674360?check_suite_focus=true

And was able to fix it with a replaceAll function: https://github.com/lumeland/lume/commit/f3f29787ba8e6c739f2443a8e116df6b67734316

But I'm not sure if the problem is the snapshot. Lume reads the file content of the source files with Deno.readTextFile() so maybe the problem is that this function behaves differently in Windows and MacOS/Linux?

Thanks for the explanation @oscarotero

I can't see the GH actions output you sent for some reason 🤔

Anyway, I'll put up a fix for this - most likely this evening but definitely this week. 👍

[oscarotero]

I send you a screenshot with a piece of the output: