Prefer toHaveClass over checking element className (jest-dom/prefer-to-have-class)
November 8, 2022 · View on GitHub
💼 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.