testing

Test components and API routes with everything already wired up.

Developer toolsClient and ServerBuilt onVitestTesting Library

What it is

@kitr/testing is three helpers. createTestApp() boots your real providers with any service faked. createTestClient() calls your API with no port. renderWithKitr() renders a component inside the app with the query cache seeded. kitr add testing sets up Vitest.

Runs in your test process only. To fake an API the frontend calls, use mocks.

Install

kitr add testing

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

Adds @kitr/testing and Vitest, vitest.config.ts and an example test. No provider. Every change.

Quick start

The server is a fetch handler, so the test client calls it directly:

// test/orders.test.ts
import { createTestClient } from '@kitr/testing'
import { describe, expect, it } from 'vitest'
import { server } from '#server/main'

describe('orders', () => {
  it('creates an order and reads it back', async () => {
    const client = createTestClient(server)

    const created = await client.post<{ id: string; status: string }>('/api/orders', {
      customer: 'Grace',
      total: 120,
    })
    expect(created.status).toBe(201)
    expect(created.body.status).toBe('open')

    const read = await client.get<{ customer: string }>(`/api/orders/${created.body.id}`)
    expect(read.body.customer).toBe('Grace')
  })
})

Run it:

pnpm test
 ✓ test/orders.test.ts (1 test) 31ms

 Test Files  1 passed (1)
      Tests  1 passed (1)

The first request boots the app exactly as kitr dev does. Nothing listens on a port, so tests run in parallel. Next in the guide: Write your first test.

Built on

kitr adds the three helpers, typed responses, error assertions and the per-file environment choice.

Problems it solves

Further reading