Skip to content
cccskills
FreePublished on GitHub

component-testing

Use when writing or editing component tests in libs/ui-react or libs/ui-rnative — shared structure and coverage conventions, plus the per-platform runner: Vitest + React Testing Library on web, Jest + React Native Testing Library on RN. Load this before writing tests.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md4.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Component testing

Same testing philosophy on both platforms; the runner and rendering harness differ. Read the shared conventions, then the section for the lib you're in (derive it from the path — see the Libraries table in AGENTS.md).

Shared conventions (both platforms)

  • Import test globals explicitly — do not rely on ambient globals.
  • Prefer callback/handler spies for interactions and assert with toHaveBeenCalledTimes, toHaveBeenCalledWith, not.toHaveBeenCalled.
  • Cover the behaviour, not the implementation: rendering, interaction, controlled state, callbacks, and the disabled state.
  • Structure: a single top-level describe('<ComponentName>'). Use flat it('should …') cases for simple components; nest describe blocks by concern (Rendering, Appearances, Sizes, Interactions, States, Styling) for richer components, and it.each([...]) for variant/size matrices.
  • No snapshot tests unless there's a clear reason.

React web (libs/ui-react)

Runner: Vitest + React Testing Library.

  • Globals: import { describe, it, expect, vi } from 'vitest'; and import '@testing-library/jest-dom';.
  • Render: import { render, screen, fireEvent } from '@testing-library/react'; — render directly with render(<Component />), no wrapper.
  • Queries: prefer accessible ones (getByRole, getByLabelText, getByText); data-testid only when nothing accessible applies.
  • Interactions: fireEvent for simple click/change; userEvent from @testing-library/user-event for typing / keyboard / focus.
  • Spies: vi.fn().

React Native (libs/ui-rnative)

Runner: Jest + React Native Testing Library.

  • Globals: import { describe, it, expect, jest } from '@jest/globals';.
  • Render: render, fireEvent, screen, waitFor from @testing-library/react-native. Every render must be wrapped in a ThemeProvider — components read theme tokens, so an unwrapped render throws. Use a small TestWrapper:
import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
import { render, fireEvent, waitFor } from '@testing-library/react-native';
import { ThemeProvider } from '../ThemeProvider/ThemeProvider';

const TestWrapper = ({ children }: { children: React.ReactNode }) => (
  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
    {children}
  </ThemeProvider>
);
  • Queries: target root elements via testID; text when testID doesn't fit; getByRole for semantic elements like switches.
  • Interactions: fireEvent.press, fireEvent.changeText(input, 'text'), and the low-level fireEvent(element, '<eventName>') form for non-press events (longPress, onError). Use waitFor for state that updates after an interaction.
  • Spies: jest.fn().

Review checks

Rules verifiable from a diff.

CheckApplies toDetectSkip
Wrong runner API for the libbothjest.fn()/@jest/globals in a ui-react test; vi.fn()/vitest in a ui-rnative test—
RN render not wrapped in ThemeProviderrnativerender(<…/>) without a themed wrapper—
data-testid/testID used where an accessible query fitsbothgetByTestId on a role-bearing elementroot nodes with no accessible role
Snapshot test with no justificationbothtoMatchSnapshot()intentional, commented snapshots
Missing coverage of the disabled/controlled path on an interactive componentbothno test touching disabled/controlled statenon-interactive components

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Creates and maintains Figma Code Connect files (`*.figma.tsx`) that map Figma components to code via the parser-based `figma.connect()` API. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.tsx files.

The English summary is being prepared. Showing the original description.

LedgerHQ/lumen23Updated Oct 17, 2026

Use when creating, naming, or placing a file or folder in libs/*, or when modifying or adding a file to an existing component (even when the barrel isn't touched) — component vs utility naming, the one-responsibility-per-file layout, when a folder needs an `index.ts` barrel (public API only), and the required set of files a component needs per lib. Load this before scaffolding or restructuring a component so the layout matches the codebase.

The English summary is being prepared. Showing the original description.

LedgerHQ/lumen23Updated Oct 17, 2026

Use when designing or changing a component's public API, its composition, or its state model in libs/ui-react or libs/ui-rnative — layering (core vs internal vs primitives), BaseProps/Props splits, converting a component to compound / changing its composition with createSafeContext, controlled/uncontrolled state, prop-naming conventions, and cross-platform API parity. Load this before shaping a new component, changing its props, or refactoring its composition.

The English summary is being prepared. Showing the original description.

LedgerHQ/lumen23Updated Oct 17, 2026

Use when writing or editing Storybook MDX docs (*.mdx) — the two-tab Overview/Implementation structure, story-backed `<Source>` examples, and doc table guidelines.

The English summary is being prepared. Showing the original description.

LedgerHQ/lumen23Updated Oct 17, 2026

Use when creating or editing Storybook stories (*.stories.tsx, React or React Native) — story layout, controls, and export naming conventions.

The English summary is being prepared. Showing the original description.

LedgerHQ/lumen23Updated Oct 17, 2026

Use when building or styling a component in libs/ui-react or libs/ui-rnative — the cross-platform styling principles, plus routing to the platform mechanics: Tailwind + cva + cn on web, useStyleSheet + themeJS + lx on React Native. Load this before writing component styles.

The English summary is being prepared. Showing the original description.

LedgerHQ/lumen23Updated Oct 17, 2026

See all skills by LedgerHQ

Report a problem with this skill