{"id":14972,"library":"test-runner-with-snap-speed-exp","title":"Storybook Component Test Runner (Experimental)","description":"The `test-runner-with-snap-speed-exp` package is an experimental, early-stage test runner specifically designed for Storybook stories. Currently at version `0.0.1`, it aims to provide a fast and integrated testing experience for UI components, likely leveraging Playwright for browser automation and potentially integrating with Jest and Testing Library for assertions and component interactions. Its core utility is to allow developers to write tests that directly target Storybook stories, facilitating visual and functional regression testing within the Storybook ecosystem. Given its `0.0.1` version, it is under active development, but a stable release cadence is not yet established, and API changes are highly probable. Key differentiators include its tight coupling with Storybook for isolated component testing and a focus on testing speed.","status":"active","version":"0.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/Hebmor/test-runner-with-snap-speed","tags":["javascript","storybook-addons","test","runner","jest","testing-library","playwright","typescript"],"install":[{"cmd":"npm install test-runner-with-snap-speed-exp","lang":"bash","label":"npm"},{"cmd":"yarn add test-runner-with-snap-speed-exp","lang":"bash","label":"yarn"},{"cmd":"pnpm add test-runner-with-snap-speed-exp","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Likely a peer dependency or a base it builds upon for Storybook integration.","package":"@storybook/test-runner","optional":false},{"reason":"Peer dependency as it tests Storybook stories.","package":"storybook","optional":false},{"reason":"Core dependency for browser automation and rendering Storybook stories.","package":"playwright","optional":false},{"reason":"Commonly used for assertions and test orchestration in conjunction with test runners.","package":"jest","optional":true},{"reason":"Often used for component interaction and assertions within tests.","package":"@testing-library/react","optional":true}],"imports":[{"note":"The library is likely ESM-first given modern JavaScript trends and its experimental nature. CommonJS `require` might not work or require specific configuration.","wrong":"const runStoriesTests = require('test-runner-with-snap-speed-exp');","symbol":"runStoriesTests","correct":"import { runStoriesTests } from 'test-runner-with-snap-speed-exp';"},{"note":"Type imports are crucial for TypeScript users to get correct type inference for configuration objects or test definitions.","symbol":"Config","correct":"import type { Config } from 'test-runner-with-snap-speed-exp';"},{"note":"Assuming a common pattern where matchers for assertions are exported from a subpath, similar to Jest or Playwright expectations.","symbol":"toHaveNoViolations","correct":"import { toHaveNoViolations } from 'test-runner-with-snap-speed-exp/matchers';"}],"quickstart":{"code":"import { runStoriesTests } from 'test-runner-with-snap-speed-exp';\nimport { expect } from '@playwright/test';\n\n// Assuming a Storybook instance is running at http://localhost:6006\nconst storybookUrl = process.env.STORYBOOK_URL ?? 'http://localhost:6006';\n\nconst config = {\n  storybookUrl: storybookUrl,\n  /**\n   * Function to execute before all stories are loaded.\n   * Useful for global setup like custom Playwright setup or mocking.\n   */\n  setup: async ({ page }) => {\n    await page.goto(storybookUrl);\n    console.log(`Navigated to Storybook at ${storybookUrl}`);\n  },\n  testMatch: ['**/*.stories.ts?(x)', '**/*.stories.js?(x)'],\n  /**\n   * Define custom test logic for each story.\n   * This example performs a basic snapshot comparison.\n   */\n  test: async ({ page, story, test }) => {\n    test(`Story: ${story.title} - ${story.name}`, async () => {\n      await page.goto(story.url);\n      // Wait for the story to fully render and stabilize\n      await page.waitForSelector('#root div');\n\n      // Simple visual snapshot test using Playwright's API\n      // In a real scenario, a more robust snapshot library would be integrated.\n      const screenshotPath = `screenshots/${story.title.replace(/ /g, '_')}-${story.name.replace(/ /g, '_')}.png`;\n      await expect(page).toHaveScreenshot(screenshotPath, { maxDiffPixelRatio: 0.05 });\n      console.log(`Snapshot taken for ${story.title}/${story.name}`);\n    });\n  },\n};\n\n// Execute the test runner\nrunStoriesTests(config).catch(error => {\n  console.error('Test runner failed:', error);\n  process.exit(1);\n});\n","lang":"typescript","description":"This quickstart demonstrates how to configure and run tests against a Storybook instance using the `test-runner-with-snap-speed-exp`. It sets up a basic Playwright environment, navigates to individual stories, and performs a visual snapshot test for each. It's designed to be run as part of a CI/CD pipeline or local development process."},"warnings":[{"fix":"Always refer to the latest (or your installed) package documentation. Pin specific patch versions (`0.0.1`) and review `CHANGELOG.md` or `package.json` for updates.","message":"As a `0.0.1` package, the API is highly unstable and subject to frequent breaking changes without prior notice. Expect `import` paths, function signatures, and configuration options to change between minor or even patch versions.","severity":"breaking","affected_versions":">=0.0.1"},{"fix":"Ensure that your `storybook`, `playwright`, and `test-runner-with-snap-speed-exp` versions are compatible. Check their respective documentation or GitHub issues for known compatibility matrices. Use `npm list <package>` to check installed versions.","message":"This package relies heavily on external tools like Storybook and Playwright. Version incompatibilities between these dependencies can lead to unexpected failures, especially with Playwright's rapid release cycle.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Start with a small subset of stories. Profile test runs using Playwright's tracing tools. Consider optimizing Storybook build performance or splitting large test suites.","message":"Performance (`snap-speed`) claims are likely experimental. Large Storybook setups or complex components might experience slow test execution or high resource consumption, negating the 'speed' aspect.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the package is installed: `npm install test-runner-with-snap-speed-exp`. If using `import`, ensure your project is configured for ESM (e.g., `\"type\": \"module\"` in `package.json`).","cause":"The package might not be installed, or there's a problem with module resolution (e.g., trying to `require` an ESM-only package in a CommonJS context).","error":"Error: Cannot find module 'test-runner-with-snap-speed-exp' from '<your-project-path>'"},{"fix":"Run `npx playwright install` to download the necessary browser binaries. Ensure your environment has sufficient disk space and network access for the download.","cause":"Playwright binaries are not installed or are corrupted, or a `playwright install` command was missed after installation.","error":"Error: Playwright browser did not launch correctly. Make sure you have installed browser binaries."},{"fix":"Verify your Storybook server is running (`npm run storybook` or equivalent). Check the port and host. Update the `storybookUrl` in your `test-runner-with-snap-speed-exp` configuration to match the actual Storybook URL.","cause":"The Storybook instance is not running or is accessible on a different port/URL than configured in the test runner.","error":"Error: Storybook URL 'http://localhost:6006' is not reachable or returned a non-200 status."}],"ecosystem":"npm"}