We are happy to announce the addition of Storybook testing to Sauce Labs Visual Testing!
With our Storybook integration, frontend developers are now able to test individual UI components for visual differences, before they get combined into the broader user interface.
Find and fix unexpected defects earlier in the process, on any browser !
This feature is available to all customers with an Enterprise contract.
Get validation on hundreds or thousands of Storybook components within seconds!
Shift left with your testing: component defects are caught at the source, on the developer’s workstation/IDE. This can prevent the costly back-and-forth between QA and frontend developers! Enables everyone to focus on the right priority!
Install the visual storybook package @saucelabs/visual-storybook and create a test-runner-jest.config.js, there just get started by adding our config (bold):
const { getJestConfig } = require('@storybook/test-runner');
const { getVisualTestConfig } = require('@saucelabs/visual-storybook');
module.exports = {
// The default configuration comes from @storybook/test-runner
...getJestConfig(),
// The configuration for Sauce Labs Visual Integration
...getVisualTestConfig(),
};That's it! Now run storybook and let Sauce Visual do the testing:
# Spin up your storybook instance in a separate terminal
# window if you're not using a live / hosted one
npm run storybook
# Run the storybook command!
npx test-storybook