Skip to main content

Testing

Testing Exodra components means compiling Exodra JSX in your test runner. Which transform to configure depends on the runner.

Vitest

Vitest uses Vite, so the Vite plugin already compiles your components — add it to vitest.config.ts the same way you add it to vite.config.ts:

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import exodra from '@exodra/vite-plugin';

export default defineConfig({
plugins: [exodra()],
test: { environment: 'jsdom' },
});

environment: 'jsdom' runs the tests under jsdom — a DOM implementation for Node — so document exists and you can mount and assert against real elements without a browser. To scope jsdom to a single file instead of the whole config, put the pragma at the top of that file:

// @vitest-environment jsdom

Then mount and assert against the real DOM:

import { mount } from '@exodra/dom';
import { bindable } from '@exodra/reactivity';

it('updates on setValue', () => {
const label = bindable('a');
const el = document.createElement('div');
const { dispose } = mount(<span bindable={{ textContent: label }} />, el);
expect(el.querySelector('span')?.textContent).toBe('a');
label.setValue('b');
expect(el.querySelector('span')?.textContent).toBe('b');
dispose();
});

Jest

Jest can compile Exodra JSX — through babel-jest (its default Babel transform), which picks up babel.config.js automatically. Add the Babel preset:

// babel.config.js
module.exports = { presets: ['exodra'] };

Component tests then compile the same way Vite compiles them. Mount with @exodra/dom under jsdom — set the test environment in jest.config.js:

// jest.config.js
module.exports = { testEnvironment: 'jsdom' };

:::warning ts-jest / @swc/jest do not work ts-jest and @swc/jest do not run Babel plugins, so they cannot compile Exodra JSX. If Jest reports an unexpected token on <, or "namespace tags are not supported" on bind:value, switch the transform to babel-jest and add the preset above. (SWC users can instead use the SWC plugin.) :::

SSR / string output

For a fast, browser-free assertion you can render a schema to HTML with @exodra/string and assert on the string instead of mounting into a DOM.