Getting started with Storybook

Prerequisites

• storybook that holds stories to be tested

• lost-pixel configuration file

1. Follow this storybook guide to add it to your project in minutes

2. Add lost-pixel configuration file

3. Add action file in the root of your project. In .github/workflows/ci.yml

   on: [push]
   jobs:
     build:
       runs-on: ubuntu-latest
   
       steps:
         - name: Checkout
           uses: actions/checkout@v3
   
         - name: Setup Node
           uses: actions/setup-node@v3
           with:
             node-version: 18.x
             cache: "npm"
   
         - name: Install dependencies
           run: npm install
   
         - name: Build Storybook
           run: npm run build-storybook
   
         - name: Lost Pixel
           uses: lost-pixel/[email protected]

4. (Optional) Add automatic PR for easy baseline update

Automatic baseline update PR

Note that your lostpixel.config.js|ts|cjs|mjs should point to the correct relative path to the built storybook or to served storybook URL

After writing your first stories, you can adopt the visual regression testing by following the visual regression testing workflow

You can see some popular integrations in the lost-pixel-examples directory