prefer-to-have-class.md

Prefer toHaveClass over checking element className (jest-dom/prefer-to-have-class)

💼 This rule is enabled in the ✅ recommended config.

🔧 This rule is automatically fixable by the --fix CLI option.

This rule is an autofixable rule that reports usages of checking element className or classList in expect statements in preference of using the jest-dom toHaveClass matcher.

Rule Details

Examples of incorrect code for this rule:

expect(el.className).toBe("bar");
expect(el.className).not.toBe("bar");
expect(el.className).toHaveProperty("class", "foo");
expect(screen.getByTestId("foo").className).toBe("foo");
expect(el.className).toContain("bar");
expect(el.className).not.toContain("baz");
expect(el).toHaveAttribute("class", "qux");

expect(el.classList[0]).toBe("foo");
expect(el.classList[0]).toBe("bar");

Examples of correct code for this rule:

expect(el).toHaveClass("bar");
expect(el).toHaveStyle({ foo: "bar" });
expect(el.class).toMatchSnapshot();
expect(el.class).toEqual(foo);

When Not To Use It

If you don't care about using built in matchers for checking class on dom elements.

Further Reading

• jest-dom toHaveStyle
• ElementCSSInlineStyle.class