본문으로 건너뛰기
cccskills
무료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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md4.0 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

LedgerHQ/lumen232026년 10월 17일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

LedgerHQ/lumen232026년 10월 17일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

LedgerHQ/lumen232026년 10월 17일 업데이트

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

LedgerHQ/lumen232026년 10월 17일 업데이트

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

LedgerHQ/lumen232026년 10월 17일 업데이트

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

LedgerHQ/lumen232026년 10월 17일 업데이트

LedgerHQ의 스킬 모두 보기

이 스킬의 문제 신고