Testing Library

pnpm add -D @tour-kit/testing-library @testing-library/react vitest
# or npm install --save-dev ...

// vitest.setup.ts
import { setupTourKitTesting } from '@tour-kit/testing-library/setup'

setupTourKitTesting()

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: ['./vitest.setup.ts'],
  },
})

import { describe, it, expect } from 'vitest'
import {
  render,
  expectStepVisible,
  advanceTour,
  HookProbe,
} from '@tour-kit/testing-library'
import { TourProvider, TourCard, useTour } from '@tour-kit/react'
import * as React from 'react'

const tours = [
  {
    id: 'demo',
    steps: [
      { id: 's1', target: '#a', content: 'First' },
      { id: 's2', target: '#b', content: 'Second' },
    ],
  },
]

function AutoStart({ tourId }: { tourId: string }) {
  const { start } = useTour()
  const started = React.useRef(false)
  // Start exactly once. `useTour().start` changes identity as provider state
  // updates, so guard against re-running the effect and restarting the tour.
  React.useEffect(() => {
    if (started.current) return
    started.current = true
    void start(tourId)
  }, [start, tourId])
  return null
}

describe('demo tour', () => {
  it('walks step 1 → step 2', async () => {
    render(
      <>
        <div id="a">A</div>
        <div id="b">B</div>
        <TourProvider tours={tours}>
          <AutoStart tourId="demo" />
          <TourCard />
          <HookProbe />
        </TourProvider>
      </>,
    )

    await expectStepVisible('s1')
    await advanceTour()
    await expectStepVisible('s2')
  })
})