GUIDES
Jest
Render Plumeria components in Jest with @plumeria/swc-jest as the transformer.
Jest takes the transform through @plumeria/swc-jest. It compiles the styling prop away, then hands the file to @swc/jest.
npm i -D @plumeria/swc-jest @swc/corePut it where @swc/jest was. Jest runs one transformer per pattern, so it replaces the entry rather than sitting beside it:
module.exports = {
testEnvironment: 'jsdom',
transform: {
'^.+\\.(t|j)sx?$': '@plumeria/swc-jest',
},
};SWC is configured as before, from .swcrc or from the options next to the transformer. A project on ts-jest, babel-jest or next/jest moves that entry to @plumeria/swc-jest; type checking then belongs to tsc, not to the test run.
Do
Assert what the component does. The class names are real, so a branch that picks a different style shows up as a different className:
import { render, screen } from '@testing-library/react';
import { Tabs } from './tabs';
test('the active tab is styled apart from the rest', () => {
render(<Tabs active="b" />);
const a = screen.getByRole('tab', { name: 'A' });
const b = screen.getByRole('tab', { name: 'B' });
expect(b.getAttribute('aria-selected')).toBe('true');
expect(b.className).not.toBe(a.className);
});- Test text, roles, state and events, as you would without Plumeria.
- Compare class names between two renders or two elements to check a conditional style took effect.
- Import styles from other files freely. They compile as in the build, and Jest's cache follows them: change a shared style and the files that use it are compiled again.
Don't
expect(button.className).toBe('xqqbxt1d xq96bg3w'); // don't
expect(getComputedStyle(button).color).toBe('red'); // don't- Don't hard-code a generated class name. Each one is a property–value pair, hashed: add a property to the style and the test fails, having found nothing wrong with the component.
- Don't assert computed styles. No stylesheet is written, and jsdom applies none; see What jsdom does not give you.
- Don't list it beside
@swc/jest,ts-jestorbabel-jestfor the same files. Only one transformer runs per pattern. - Don't test what a style compiles to here. Call the transform directly; see Driving the transform.