gioVitest

The vitest plugin that makes CSS Module imports evaluate to the class names the GioJS server renders.

import { defineConfig } from 'vitest/config';
import { gioVitest } from '@gio.js/core/vitest';

export default defineConfig({
  plugins: [gioVitest()],
});

Reference

gioVitest() takes no options and returns a vite plugin (GioVitestPlugin, assignable to vite's Plugin) named gio:css-modules.

Behavior

• vitest compiles *.module.css its own way, with class names such as _card_80010d that the GioJS server never sends. With the plugin, an import such as import styles from './card.module.css' evaluates to the class map GioJS compiles - the names server rendering, the hydration bundle and the route stylesheet all use.
• It applies to imports in your pages and components (as renderPage renders them) and in your test files alike.
• Only plain .module.css imports are handled. An import with a query (?inline, ?raw) is left to vite, and plain .css imports need nothing - vitest already loads them as empty modules.
• In watch mode, editing the stylesheet re-runs the tests that import it.

Examples

Assert on a class name

import { expect, it } from 'vitest';
import { renderPage } from '@gio.js/core/testing';
import styles from '../app/card/card.module.css';

it('renders the card with its CSS Module class', async () => {
  const page = await renderPage('/card');
  expect(page.html).toContain(`class="${styles.card}"`);
});

styles.card is the server's name for the class (for example card_e15fc2_card), so the assertion holds without hard-coding it.

With the scaffold's @/ alias

vitest does not read tsconfig paths. Mirror the starter's @/* alias next to the plugin:

import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vitest/config';
import { gioVitest } from '@gio.js/core/vitest';

export default defineConfig({
  plugins: [gioVitest()],
  resolve: { alias: { '@': fileURLToPath(new URL('.', import.meta.url)) } },
  test: { include: ['tests/**/*.test.ts'] },
});

Good to know

• node:test needs no plugin. Under node --import tsx --test, the test kit registers GioJS's own CSS hooks, and CSS Modules already render the server's names.
• Plain JavaScript on purpose. vite loads a config's npm imports with Node's own loader, which refuses TypeScript inside node_modules, so @gio.js/core/vitest ships as .js with type declarations.
• @gio.js/core does not depend on vite or vitest; install vitest in your app.

Related

• Testing: vitest setup
• CSS & Styling - CSS Modules
• renderPage

Version history