fast-check-frontend

Property-based testing library for UI components that generates and executes random user interaction sequences to verify component invariants.

What This Skill Does

This skill helps you work with fast-check-frontend, a library that applies property-based testing principles to UI components. Instead of testing specific user paths, it generates random sequences of interactions (clicks, typing, keyboard events, etc.) and verifies that component invariants always hold.

Instructions

Understanding the Architecture

1. **Core Library** (`src/createInteractionProperty.ts`):

- `createInteractionProperty` function integrates fast-check with Testing Library user events

- Interaction types: click, type, keyboard, hover, unhover, select, upload, clear, tab

- Weighted arbitraries generate realistic interaction sequences (clicks 30%, typing 25%, keyboard 10%)

- Selectors include data-testid, ARIA roles, element types

- Text content includes edge cases (empty strings, Unicode, XSS, SQL injection patterns)

- Execution engine handles missing DOM elements gracefully (log but don't fail)

2. **Example Implementation** (`examples/react/`):

- React signup form demonstrates library usage

- Complex form with validation, modals, error boundaries

- Property tests verify invariants under random interactions

Writing Property Tests

When creating or modifying property tests:

1. **Define Component Render Function**:

- Must return fresh HTMLElement for each test run

- Cleanup previous renders to avoid state pollution

2. **Define Invariants** (predicates that must always hold):

- No JavaScript errors (error boundary not rendered)

- Accessibility attributes maintained (aria-required, aria-invalid)

- State consistency (e.g., only one modal open)

- Form validation rules enforced

- No memory leaks or dangling event listeners

3. **Configure Options**:

- Set min/max sequence length

- Adjust interaction weights if needed

- Configure fast-check options (numRuns, seed, etc.)

Example Property Test Structure

```typescript

test('component maintains invariants under random interactions', async () => {

await fc.assert(

createInteractionProperty({

renderComponent: () => {

// Render and return HTMLElement

},

invariants: [

(container) => {

// Check invariant 1

},

async (container) => {

// Check invariant 2 (async allowed)

}

],

options: {

minLength: 5,

maxLength: 20

}

}),

{ numRuns: 100 }

);

});

```

Development Workflow

From `examples/react/`:

Key Patterns

1. **Graceful Degradation**: Interaction execution catches errors and continues - selectors might not match, elements might not exist (expected behavior)

2. **Invariant-Based Validation**: Define what should NEVER happen rather than prescriptive behavior:

- ❌ "Submit button should be disabled when email is invalid"

- ✅ "Form should never submit with invalid email"

3. **Weighted Arbitraries**: Common interactions have higher probability than rare ones

4. **Edge Case Coverage**: Text inputs include Unicode, XSS attempts, SQL injection patterns, empty strings

Technical Stack

Project Structure

```

/src/createInteractionProperty.ts # Main library

/examples/react/

src/SignupForm.tsx # Example component

src/SignupForm.test.tsx # Property test example

src/App.tsx # Demo app

```

Communication Style

Be extremely concise. Sacrifice grammar for brevity.

Constraints