How to add visual regression testing to Jest
How to add visual regression testing to Jest Jest has excellent snapshot testing for component output — toMatchSnapshot() saves the serialized HTML and diffs it on subsequent runs. But HTML string diffs miss the entire visual layer: CSS, layout, spacing, fonts. jest-image-snapshot solves this but requires Puppeteer, which means a 300MB browser install in every CI environment and flaky rendering across OS versions. There's a cleaner approach. PageBolt's screenshot API accepts raw HTML strings directly via the html parameter. That means you can render a component to a string with renderToString , POST it to PageBolt, get a PNG back, and diff it against a stored baseline — with no browser install required and consistent rendering every time. How the html parameter works Most screenshot APIs only accept URLs. PageBolt also accepts raw HTML: { "html" : "<html><body><button class='btn'>Click me</button></body></html>" , "width" : 800 , "height" : 400 , "format" : "png" } PageBolt renders thi
Continue reading on Dev.to Webdev
Opens in a new tab
