Vitest and Storybook

Upload Vitest browser-mode and Storybook test results to kinora with the @kinora/vitest-reporter package.

@kinora/vitest-reporter uploads the results of Vitest tests that run in a browser, including Storybook tests, to kinora. They get the same pages as Playwright runs: pass rates, flaky tests, per-test history, the Playwright trace of each test, screenshot comparisons, and for Storybook, the Components page. Upload never fails your test run.

Install

pnpm add -D @kinora/vitest-reporter
# or: npm i -D @kinora/vitest-reporter

vitest (>=4.1) is a peer dependency.

Usage

Add it to vitest.config.ts, next to the default reporter:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    reporters: ['default', ['@kinora/vitest-reporter', { project: { slug: 'web-app' } }]],
  },
})

The token comes from the environment; the server URL defaults to the hosted cloud:

KINORA_TOKEN=<token> npx vitest run

Create an API token in the dashboard under Settings → Workspace. Self-hosting? Point at your server with KINORA_URL.

Options

Node tests

Only the tests of Vitest projects running in a browser (browser mode, Storybook) are uploaded by default. Node unit tests are usually thousands of fast, deterministic tests with no trace: they add little to kinora and would eat your plan’s monthly result quota in a single run.

To upload them too, set include: 'all'. A run with no browser test uploads nothing and says so.

Traces

With browser mode and the Playwright provider, turn traces on in the browser config. Each test’s trace.zip is uploaded and opens in kinora’s trace viewer:

import { playwright } from '@vitest/browser-playwright'

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      provider: playwright(),
      instances: [{ browser: 'chromium' }],
      trace: 'retain-on-failure',
    },
  },
})

Keep the trace files where Vitest puts them by default: with a custom tracesDir, Vitest 4 does not hand the trace to reporters.

Screenshot comparisons

A failing toMatchScreenshot uploads its reference, actual and diff images, shown on the run page as a screenshot comparison, named after the test.

Storybook

With Storybook’s Vitest addon, each story is a Vitest test. The reporter records which story each test renders, as <Component>/<Story> (for example Button/Primary), so stories appear on the project’s Components page with no extra setup. Interactions run by a story’s play function are not Playwright actions, so the trace shows the rendered story rather than each step.

Accessibility

With Storybook’s a11y addon, each story’s accessibility check (axe) is uploaded with the test: the rules it breaks, their impact (critical, serious, moderate, minor), the elements they hit and a link to each rule’s documentation. Only the violations are sent, not axe’s full result.

The run and test pages list the violations, most severe first. On the Components page, each story shows how many rules it breaks, and Accessibility hotspots ranks the components by their stories’ violations, weighted by impact, to point at where fixing pays off first.

How a violation counts depends on the addon’s a11y.test parameter:

• todo: a warning. The test passes and kinora records the violations.
• error: the test fails. Storybook throws before it stores the check on the test, so kinora reads the violations from the failure message instead: you get the rules, elements and links, but not their impact. Use todo to keep the impact, if your CI does not need to fail on violations.
• off: no check, nothing recorded.

Playwright tests get the same views from axe scans attached to the test: see the Playwright reporter.

Notes

• Test identity is the file (relative to the Vitest root), the suite path and the Vitest project name, which includes the browser in browser mode (browser (chromium)). History stays stable as long as those don’t change.
• The reporter turns on Vitest’s test locations, so each test links to its file:line.