rUIntime

An in-browser test runner UI for Vite projects. Write tests with describe/it, use expect from vitest, and watch them run live in the browser.

Install

pnpm add -D @fartinmartin/ruintime

Usage (Svelte)

Load test files lazily in onMount so the page renders immediately, then modules register themselves as they load:

<!-- app.svelte -->
<script>
	import { onMount } from 'svelte';
	import Ruintime from '@fartinmartin/ruintime/svelte';

	const tests = import.meta.glob('./**/*.test.ts');

	onMount(() => Promise.all(Object.values(tests).map((load) => load())));
</script>

<Ruintime title="my app" version="1.0.0" />

Or import individual files:

<script>
	import { onMount } from 'svelte';
	import Ruintime from '@fartinmartin/ruintime/svelte';

	onMount(async () => {
		await import('./math.test.ts');
		await import('./network.test.ts');
	});
</script>

<Ruintime />

Write tests using describe/it from the lib and expect from vitest:

// example.test.ts
import { describe, it } from '@fartinmartin/ruintime';
import { expect } from 'vitest';

describe('add', () => {
	it('adds two numbers', () => {
		expect(1 + 1).toBe(2);
	});
});

Callbacks

The component accepts lifecycle callbacks to hook into the test run:

<Ruintime
	onTestEnd={(test) => console.log(test.title, test.status)}
	onSuiteEnd={(suite) => console.log(suite.title, suite.status)}
	onRunStart={() => console.log('run started')}
	onRunEnd={() => console.log('run finished')}
/>

Props

| Prop | Type | Default | Description | | ------------ | --------------------------------- | ------------ | ---------------------------------- | | title | string | 'rUIntime' | Displayed in the header and footer | | version | string | — | Displayed in the footer | | onTestEnd | (test: TestSnapshot) => void | — | Called after each test completes | | onSuiteEnd | (suite: SuiteSnapshot) => void | — | Called after each suite completes | | onRunStart | () => void | — | Called when a test run begins | | onRunEnd | () => void | — | Called when a test run finishes |