@labmgm/test-utils

Testing helpers for the MGM Laboratory Design System.

Install

pnpm add -D @labmgm/test-utils @testing-library/react @testing-library/user-event vitest happy-dom

Use

// tests/setup.ts
import "@labmgm/test-utils/matchers";

// tests/button.test.tsx
import { renderWithTheme, userEvent, axeCheck } from "@labmgm/test-utils";

it("renders accessibly in dark mode", async () => {
  const { getByRole, container } = renderWithTheme(<Button>Save</Button>, { theme: "dark" });
  const button = getByRole("button");
  expect(button).toHaveAccessibleName("Save");
  expect(button).toBeBrandColored("blue");
  await userEvent.click(button);
  const { violations } = await axeCheck(container);
  expect(violations).toEqual([]);
});

API

| Export | Purpose | | --------------------- | ---------------------------------------------------------------------------------- | | renderWithTheme | RTL render wrapped in <ThemeProvider>. Returns RTL result + setTheme helper. | | axeCheck(target?) | Runs axe-core, returns violations. | | toHaveAccessibleName| Custom matcher — exact match against aria-label / aria-labelledby / text. | | toBeBrandColored | Custom matcher — checks computed color / bg / border against brand hexes. | | userEvent | Re-export of @testing-library/user-event — single import for ergonomics. | | screen / within / fireEvent / waitFor / act | Re-exports of @testing-library/react. |

License

MIT © MGM Laboratory.