component-testing

Import describe, it, expect, and vi from vitest plus @testing-library/jest-dom, then render components directly with render from @testing-library/react. Prefer accessible queries like getByRole, use fireEvent or userEvent for interactions, and assert with vi.fn() spies.

Import globals from @jest/globals and render with @testing-library/react-native, wrapping every render in a ThemeProvider with ledgerLiveThemes. Query via testID or getByRole, use fireEvent.press and fireEvent.changeText for interactions, and jest.fn() for spies.

In this design system, web components in libs/ui-react use Vitest with React Testing Library, while React Native components in libs/ui-rnative use Jest with React Native Testing Library. Mixing runner APIs like vi.fn() in an RN test is flagged as an error.

React Native components read theme tokens, so rendering without a ThemeProvider wrapper throws. Wrap every render in a TestWrapper that provides ThemeProvider with ledgerLiveThemes, a colorScheme, and a locale.

Snapshot tests are discouraged unless there is a clear, documented reason. The conventions favor behavior-focused tests covering rendering, interactions, controlled state, callbacks, and disabled states instead of toMatchSnapshot assertions.