Files
skills/docs/ui/react/react-auth/src/components/test-wrap.md
2026-05-29 08:20:56 +01:00

2.5 KiB

test-wrap

(no submodules)

Purpose

Internal test helper consumed only by the Wave 2 form .test.tsx files in src/components/<form>/. The helper wraps a node in every provider the forms need to mount inside a happy-dom environment: <MemoryRouter>, <TranslationProvider>, and <ThemeProvider>. Without these providers, @suaveplan/react-ui primitives (which the forms compose) throw react-ui.use_themed_variants.no_provider and react-i18n useTranslation() panics on first render. The helper centralises the wrap so every form test mounts under the same conditions.

Features

  • Single wrapForm(node) function returning a fully-wrapped ReactElement.
  • A module-scope createI18n call that yields an empty-message i18n instance — the tests assert against the form's own translation defaults rather than catalog lookups, so an empty catalog is correct.
  • Uses Wave 1's @suaveplan/react-ui's lightTheme via the dedicated subpath export so the theme bundle is the same one production callers ship.
  • Renders inside a <MemoryRouter> because every form ships at least one <Link> to /auth/login / /auth/register.

Usage: Basic

import { render } from "@testing-library/react";
import { wrapForm } from "../test-wrap.js";
import { LoginForm } from "./login-form.js";

const { getByLabelText } = render(
    wrapForm(<LoginForm onSubmit={async () => {}} />)
);

Usage: Advanced

Pass any node — including nested fragments and arrays — and the wrap is the same:

import { wrapForm } from "../test-wrap.js";
import { LoginForm, RegisterForm } from "@suaveplan/react-auth";

render(
    wrapForm(
        <>
            <LoginForm onSubmit={async () => {}} />
            <RegisterForm onSubmit={async () => {}} />
        </>
    )
);

API Reference

wrapForm(node: ReactNode): ReactElement

Returns the input node wrapped in <MemoryRouter><TranslationProvider><ThemeProvider>{node}</ThemeProvider></TranslationProvider></MemoryRouter>.

Implementation Notes

  • Not exported from the package root barrel — wrapForm is internal test plumbing only.
  • Excluded from coverage via vitest.config.ts (exclude: ["src/components/test-wrap.tsx"]) so it does not skew the 100/100/100/100 threshold.
  • The empty messages map on the i18n instance keeps tests deterministic — every translation lookup returns its key, and the forms supply their own English defaults via the translations prop.