[prefer-to-have-style] support index accessing of style

[G-Rath]

This was picked up in the smoke tests.

Currently prefer-to-have-style will error on indexed access of style, e.g.

expect(element.style[1]).toEqual('padding');

It wants you to replace the above with:

expect(element).toHaveStyle('padding');

What I'm not sure is if that by itself is valid as the examples for that matcher only show complete CSS.

Looking at our tests we have this case:

eslint-plugin-jest-dom/src/__tests__/lib/rules/prefer-to-have-style.js

Lines 100 to 104 in 9b48d90

	{
	code: `expect(el.style).not.toContain("background-color")`,
	errors,
	output: `expect(el).not.toHaveStyle({backgroundColor: expect.anything()})`,
	},

So then the rule should actually already handle this situation for us, we just need to implement support for index accessing - the logic should be something like:

if index access of style, attempt to determine the value being accessed from the matcher, and replace it with toHaveStyle({ <matcher>: expect.anything() });

[github-actions]

🎉 This issue has been resolved in version 4.0.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀