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.