prefer-to-have-style.md

Prefer toHaveStyle over checking element style (jest-dom/prefer-to-have-style)

💼 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.style in expect statements in preference of using the jest-dom toHaveStyle matcher.

Rule Details

Examples of incorrect code for this rule:

expect(el.style.foo).toBe("bar");
expect(el.style.foo).not.toBe("bar");
expect(el.style).toHaveProperty("background-color", "green");
expect(screen.getByTestId("foo").style["scroll-snap-type"]).toBe("x mandatory");
expect(el.style).toContain("background-color");
expect(el.style).not.toContain("background-color");
expect(el).toHaveAttribute(
  "style",
  "background-color: green; border-width: 10px; color: blue;"
);

Examples of correct code for this rule:

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

When Not To Use It

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

Further Reading

• jest-dom toHaveStyle
• ElementCSSInlineStyle.style