Inline snapshots for mocked functions

[zojize]

Clear and concise description of the problem

I'm a huge fan of Vitest and I love using the toMatchInlineSnapshot when writing test cases and receiving instant feedback. But I think it would be great to have this feature for testing mock function calls in toHave(Nth)BeenCalledWith, toHave(Nth)ReturnedWith as an asymmetric matcher.

Suggested solution

test('mock function parameter inline snapshot', () => {
  const foo = vi.fn()
  foo("bar")
  expect(foo).toHaveBeenCalledWith(
    // snapshot here can be updated in watch mode
    // naming here follows the `expect.stringMatching` pattern
    // but I think it could be more concise (e.g. `expect.snapshot`)
    expect.inlineSnapshotMatching(`"bar"`)
  )
})

Alternative

#5929 (comment)

This behavior can be achieved with expect.extend and parsing/serializing the snapshots, but I don't think there is a way (or is there a way? please let me know!) to inject snapshot updates on the user end.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[hi-ogawa]

Mock history is available in f.mock.calls, f.mock.results, etc... so you can dump them directly for snapshots. I often use this pattern, for example https://github.com/hi-ogawa/js-utils/blob/c4e8fc0a39e730413cfa8704ba4b431bf1309a7c/packages/utils/src/lodash.test.ts#L598-L613

    const f = vi.fn();
    // ... do something with f ...
    // ... then dump all calls
    expect(f.mock.calls).toMatchInlineSnapshot(`
      [
        [
          1,
        ],
        [
          2,
        ],
      ]
    `);

Would it be different from what you suggest?

[zojize]

Mock history is available in f.mock.calls, f.mock.results, etc... so you can dump them directly for snapshots. I often use this pattern, for example https://github.com/hi-ogawa/js-utils/blob/c4e8fc0a39e730413cfa8704ba4b431bf1309a7c/packages/utils/src/lodash.test.ts#L598-L613

    const f = vi.fn();
    // ... do something with f ...
    // ... then dump all calls
    expect(f.mock.calls).toMatchInlineSnapshot(`
      [
        [
          1,
        ],
        [
          2,
        ],
      ]
    `);

Would it be different from what you suggest?

Oh this is great! I totally missed this part of the docs for mocked functions 😂. I would argue that it's less intuitive than the syntax I'm proposing here but I think it's a great alternative. With that said, would it be possible for the user/plugin to be able to inject functionality to the inline snapshot updates?

[hi-ogawa]

would it be possible for the user/plugin to be able to inject functionality to the inline snapshot updates?

Can you elaborate what you mean? Are you asking whether it's possible to implement your asymmetric matcher expect.inlineSnapshotMatching(`"bar"`) in userland?

[zojize]

Can you elaborate what you mean? Are you asking whether it's possible to implement your asymmetric matcher expect.inlineSnapshotMatching(`"bar"`) in userland?

Yeah basically. But on second thought the solution you provided is sufficient for any use case really. The asymmetric matcher I'm proposing here is nice to have but I don't feel like it's that important to be implemented inside the framework. I think we can close this issue on this note if you don't have any other take on this. Thanks for letting me know the solution 😄!