3 ms·
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 chrom
by shakes_mcjunkie 3y ago
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].
[1] https://support.google.com/webdesigner/answer/9008244?hl=en https://support.google.com/webdesigner/answer/9008244?hl=en
- akudha 3y agoYes, 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
- shakes_mcjunkie 3y agoAre 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.
- akudha 3y agoThank you, I wasn't aware of getComputedStyle, will experiment with it. I haven't yet tried react-testing-library yet, will try it too. It looks like testing JS is straightforward, but not CSS?
- shakes_mcjunkie 3y agoOnce 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.
- TechBro8615 3y agoIf 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.
- akudha 3y agoI did check Chromatic, my employer rejected it. I'll have to find some other way.