sfnext-testing

Testing Storefront Next

Three layers, all shipped in your project (see docs/README-TESTS.md, docs/README-STORYBOOK.md, AGENTS.md):

Prefer the cheapest layer that proves the behavior: pure logic and loaders in Vitest, rendered states and interactions in stories, cross-page shopper flows in e2e.

Commands

pnpm test                         # all unit tests (vitest run); does NOT collect coverage
pnpm test src/components/footer   # one file or directory
pnpm test:watch                   # watch mode
pnpm test --coverage              # coverage report (thresholds enforced)
pnpm test --ui                    # Vitest UI

pnpm storybook                                        # dev server on :6006
pnpm exec playwright install chromium                 # once, for interaction/a11y runs
pnpm storybook:test --type=snapshot                   # add --update to rewrite snapshots
pnpm storybook:test --type=interaction                # play() functions in real Chromium
pnpm storybook:test --type=a11y                       # axe checks
pnpm storybook:test --type=snapshot --stories=footer  # narrow to matching story paths

Add --static (optionally --reuse-build after pnpm storybook:build) to run interaction or a11y against a static build. --coverage with snapshot generates story tests and reports story coverage.

Coverage thresholds live inline in vitest.config.ts (thresholds), and src/components/ui/**, stories, snapshot fixtures and __mocks__ are excluded from coverage. Do not chase 100%.

Unit test

import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { AllProvidersWrapper } from '@/test-utils/context-provider';
import MyThing from './index';

describe('MyThing', () => {
    it('renders the label', () => {
        render(<MyThing label="Hello" />, { wrapper: AllProvidersWrapper });
        expect(screen.getByText('Hello')).toBeInTheDocument();
    });
});