What is the best way to test React components, specifically CSS? Are there any test frameworks, tricks etc to do it? Is there a way to compare CSS properties of components with Figma designs?
Are you using vanilla css and class names? Or styling the elements with the style attribute?
Usually if I need to debug css I'll check computed styles in chrome debugger. It will show you what styles are being applied to an element and where they came from [1].
Yes, I am using Chrome debugger too. But there are tons of components that my team inherited, it is not possible to test them all manually. I was wondering if there is any automatic way to test it. I looked at Jest, but it seems to be for JS testing, not CSS
If you just want to catch regressions while refactoring, it's probably easiest to add visual snapshot tests. Checkout Chromatic for a SaaS that integrates with Storybook and can detect diffs of components on each PR.
Are there refs the compliments are holding on to? If so use that and then window.getComputedStyle(refeElement) to test the style.
Jest is a testing framework. You'll need to plug in other libraries to test specific things. For example, use react-testing-library to test react components in various ways.
Once you have the element it should be fairly straightforward to test computed styles. You may have to add some hooks for react-testing-library to grab elements like attributes, unique text, refs, etc. Read up on the tools you should be able to find something in there for your use case.
Usually if I need to debug css I'll check computed styles in chrome debugger. It will show you what styles are being applied to an element and where they came from [1].
[1] https://support.google.com/webdesigner/answer/9008244?hl=en