vitest/prefer-snapshot-hint

Snapshots in a .snap file are named after the test and numbered, like renders the menu 1 and renders the menu 2. With several in one test, you can't tell which snapshot belongs to which expect, and adding one in the middle renumbers the rest. A hint becomes part of the name, as in renders the menu > closed 1.

By default a hint is only required in a test that has more than one snapshot. Inline snapshots aren't checked.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"vitest/prefer-snapshot-hint" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"vitest/prefer-snapshot-hint" = ["error", "multi"] # "multi" or "always"

Examples#

example.ts2 problems

import { expect, test } from "vitest";

test("renders the menu", () => {
  expect(renderMenu({ open: false })).toMatchSnapshot();
  expect(renderMenu({ open: true })).toMatchSnapshot();
});

example.tsNo problems

import { expect, test } from "vitest";

test("renders the menu", () => {
  expect(renderMenu({ open: false })).toMatchSnapshot("closed");
  expect(renderMenu({ open: true })).toMatchSnapshot("open");
});

test("renders the footer", () => {
  expect(renderFooter()).toMatchSnapshot();
});

A single argument only counts as a hint if it's a string or a template literal. Property matchers or a variable are reported:

example.ts2 problems

import { expect, test } from "vitest";

test("creates users", () => {
  expect(createUser("Ada")).toMatchSnapshot({ id: expect.any(Number) });
  expect(createUser("Grace")).toMatchSnapshot(hint);
});

With property matchers, the hint is the second argument:

example.tsNo problems

import { expect, test } from "vitest";

test("creates users", () => {
  expect(createUser("Ada")).toMatchSnapshot({ id: expect.any(Number) }, "first user");
  expect(createUser("Grace")).toMatchSnapshot({ id: expect.any(Number) }, "second user");
});

Options#

bunfig.toml

[lint.rules]
"vitest/prefer-snapshot-hint" = ["error", "always"]

Option	What it does
`"multi"` (default)	Require a hint if the test has more than one snapshot.
`"always"`	Require a hint on every snapshot.

example.tswith "always"1 problem

import { expect, test } from "vitest";

test("renders the footer", () => {
  expect(renderFooter()).toMatchSnapshot();
});