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/[email protected]
​
      - name: Setup Node
        uses: actions/[email protected]
        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 built storybook or to served storybook url
After writing your first stories you can adopt the visual regression testing by following visual regression testing workflow​
You can see some popular integrations in the lost-pixel-examples directory
Last modified 2mo ago