Add support for inline snapshots tests

[niedzielski]

What is the problem this feature will solve?

Jest inline shapshots are like file-based snapshots but much more casual. I love using them for small snapshots and I think they'd be a great improvement to Node.js. From Jest's docs, they look like:

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="https://example.com">Example Site</Link>)
    .toJSON();
  expect(tree).toMatchInlineSnapshot(`
<a
  className="normal"
  href="https://example.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Example Site
</a>
`);
});

What is the feature you are proposing to solve the problem?

The Node.js version might look like:

test("renders correctly", async ctx => {
  const tree = renderer
    .create(<Link page="https://example.com">Example Site</Link>)
    .toJSON();
  ctx.assert.snapshotInline(`
<a
  className="normal"
  href="https://example.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Example Site
</a>
`);
});

What alternatives have you considered?

I use file snapshots or assert.deepEqual().

[lluisemper]

I don’t think inline snapshot testing fits well with Node.js core. Snapshot testing is mostly used for UI stuff, like React components in the browser, which doesn’t really match Node.js’s server-side focus. Node tests usually deal with APIs, files, or data, and tools like Jest or assert.deepEqual() already cover those cases. Adding this to core might just add extra complexity without much benefit for backend testing. However, a collaborator might see this differently.

[pmarchini]

Hey! As far as I can see the main difference is that the snapshot is being updated directly in the source code and not in a file.
Personally I think that's an interesting nice to have but I don't think it should be part of node core.
It's a nice fit indeed for userland IMHO

[himself65]

Yeah I think it's shouldn't be the part of core. updating the source code seems pretty new thing for node.js. There might need add a AST parser for that? or we just regex string replace

[niedzielski]

I appreciate the feedback!

the main difference is that the snapshot is being updated directly in the source code and not in a file.

This is totally correct. This suggestion is for an ergonomic improvement to the already existing TestContext.assert.snapshot(). In my experience, it's inline snapshots are so much nicer to use than external because the testing logic and data is colocated instead of being split.

UI stuff

I realize the example given was taken a Jest UI demo but I actually don't use it for UI much myself. I often use it for testing non-UI code like parsers or any function that generates a complex output that I don't want to maintain manually.

AST parser

Even though it's just a string replace, I would guess you'd need a proper AST unfortunately for a robust implementation.

Yeah I think it's shouldn't be the part of core.

Not that everything needs to be compared to competitors but I do think it's a useful lens. For what it's worth, Deno recently added support for this feature.

[ianwremmel]

Seconding this request. inline snapshots are the main thing preventing me from abandoning jest. For what it's worth, I don't use them for UI tests (those go in standalone snapshot files, if I use them at all). I find inline snapshots to be super useful for API test where you don't know exactly what data you're going to get, but you do not it shouldn't change from one test to the next. Yes, snapshot files also solve this problem, but they're much easier to review when the snapshots are in line.

[pmarchini]

My main concern about this feature was the need for an AST parser.
While discussing this with @marco-ippolito, he pointed me to our REPL module and its internal use of Acorn.
Since we already have the necessary dependencies, I think it’s worth a try.
If nobody beats me to it, I’ll open a PR with a trivial implementation so we can discuss this further.

I implemented a very quick PoC and, honestly, I’ve changed my mind about using such an API: IMHO, it really decreases the cognitive load for small snapshots.

[pmarchini]

#59463 ← Here is the very first draft of the inlineSnapshot method.
I've already had some discussions with other collaborators, and we're still unsure about the approach.

I took heavy inspiration from Jest's functionality, but this implementation still feels a bit too complex.

Any feedback is more than welcome!

[github-actions]

There has been no activity on this feature request for 5 months. To help maintain relevant open issues, please add the never-stale Mark issue so that it is never considered stale label or close this issue if it should be closed. If not, the issue will be automatically closed 6 months after the last non-automated comment.
For more information on how the project manages feature requests, please consult the feature request management document.

[ianwremmel]

not stale