[Bug]: regression: inline snapshot indent at col 0

[rlindner81]

Version

29.7.0

Steps to reproduce

similar behavior was previously reported and fixed in
#9477
#11459

minimal example:

describe("some reason to indent", () => {
  describe("more reason to indent", () => {
    it("inline snap", () => {
      expect([{ foo: 42 }]).toMatchInlineSnapshot(`
[
  {
    "foo": 42,
  },
]
`);
    });
  });
});

as you can see formatting works, but indentation does not work.

Expected behavior

the inline snapshot should be indented properly.

Actual behavior

the inline snapshot is always un-indented, i.e., at col 0

Additional context

• running prettier 3.0.3 in this project
• jest configuration prettierPath: null, but removing that makes no difference

Environment

System:
    OS: macOS 13.5.2
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
  npmPackages:
    jest: ^29.7.0 => 29.7.0

[mrazauskas]

You need Prettier 2 to make this work.

Prettier 3 is not yet supported and that is documented. Also prettierPath: null disables Prettier, not toggles any special mode or so (;

[rlindner81]

You need Prettier 2 to make this work.

Prettier 3 is not yet supported and that is documented. Also prettierPath: null disables Prettier, not toggles any special mode or so (;

@mrazauskas Thanks for the hints. You say that the setting disables prettier, but the snaps do still get some formatting. What confuses me is that the indent is broken, but the formatting of objects and arrays etc in the snapshots still works.

I must not be thinking about this right. I would expect at the time the inline snapshots are written, you could take the current indent of the invocation line instead of 0. And maybe update the snap if the indent changes. Then, even if external formatters post process the file, it should be stable in two runs, but for most format on save setups it would just need one.

[mrazauskas]

Yes, snapshots get some formatting without Prettier as well. It might there is the way to fix indentation. See PR which implemented that: #7792

[rlindner81]

For reference, I had a look at jest-snapshot. And it works for me with this hack:

https://github.com/jestjs/jest/blob/main/packages/jest-snapshot/src/InlineSnapshots.ts#L172

      return (
        sourceSoFar.slice(0, node.start) +
        // generate(node, {retainLines: true}).code.trim() + // before 
        generate(node, {retainLines: true}).code.trim().replace(/\n/g, "\n" + " ".repeat(node.loc.start.column)) + // after
        sourceSoFar.slice(node.end)
      );

this is a very bad way to do it and serves more as a proof of concept that the indent information is very close.

[rlindner81]

I understand too little about how babel works to fix this properly. Anyways, we have two workarounds now:

• Either downgrade to Prettier 2
• Or patch the jest-snapshot code

Ultimately, I hope Prettier 3 will be adopted and this hack be made unnecessary at some point.

[SimenB]

Prettier 3 went async-only, and our (builtin) matchers are all synchronous. So it's not trivial to migrate over, unfortunately...

[rlindner81]

@SimenB Thanks for chiming in! I read about the async change when I did the original update to Prettier 3 for my projects. If I recall correctly, in the original postings, it was unclear if Prettier 3 would ever be adopted, because the async change is so disruptive. I'm still hopeful that it may happen at some point. If someone makes a start on this, I will try to help out a little too.

[SimenB]

Heh #14566

[github-actions]

This issue 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.