Lost Pixel
Search
⌃K

Getting started with Storybook

Prerequisites

  • storybook that holds stories to be tested
  • lost-pixel configuration file
  1. 1.
    Follow this storybook guide to add it to your project in minutes
  2. 2.
    Add lost-pixel configuration file​
  3. 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]
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