@letar/forms — Declarative Form Components for React

Testing Utilities

Helpers for testing forms with Vitest and @testing-library/react.

Installation

npm install -D @testing-library/react @testing-library/user-event

Basic Test

import { renderForm, fillField, submitForm } from '@letar/forms/testing'

it('submits contact form', async () => {
  const { onSubmit } = renderForm(ContactForm)

  await fillField('name', 'Ivan')
  await fillField('email', 'ivan@test.com')
  await submitForm()

  expect(onSubmit).toHaveBeenCalled()
})

Validation Test

import { renderForm, fillField, submitForm, expectFieldError } from '@letar/forms/testing'

it('shows validation errors', async () => {
  renderForm(ContactForm)

  await fillField('email', 'not-an-email')
  await submitForm()

  expectFieldError('email', 'Invalid email')
})

Available Helpers

// Rendering
renderForm(Component, options?)    // Render with ChakraProvider
TestWrapper                        // Standalone ChakraProvider wrapper

// Interaction
fillField(name, value)             // Fill field by data-field-name
submitForm(buttonText?)            // Click submit button

// Assertions
expectFieldError(name, message)    // Assert error shown
expectNoFieldError(name)           // Assert no errors
expectFieldValue(name, value)      // Assert field value

// Multi-step
goToStep(step)                     // Navigate to step
expectActiveStep(step)             // Assert current step

// Arrays
addItem(listName?)                 // Add list item
removeItem(index, listName?)       // Remove list item
expectItemCount(listName, count)   // Assert item count