jest/prefer-snapshot-hint

Snapshots in a .snap file are named after the test and numbered: renders the menu 1, 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: 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:

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

Every option, set to its default:

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

Examples

Reported:

import { expect, test } from "@jest/globals";

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

Not reported:

import { expect, test } from "@jest/globals";

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:

import { expect, test } from "@jest/globals";

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:

import { expect, test } from "@jest/globals";

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

Options

[lint.rules]
"jest/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.

import { expect, test } from "@jest/globals";

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