react-testing

name	react-testing
description	Use when writing or editing React tests in libs/ui-react (and ui-react-visualization) — Vitest + React Testing Library conventions (queries, imports, interactions, mocking, structure).
paths	libs/ui-react/**/*.test.ts, libs/ui-react/**/*.test.tsx, libs/ui-react-visualization/**/*.test.ts, libs/ui-react-visualization/**/*.test.tsx

React testing (libs/ui-react)

Testing target elements

• Prefer accessible queries: getByRole, getByLabelText, getByText
• Use data-testid only when no accessible query applies

Test runner

• Uses Vitest
• Do not expose globals, instead import explicitly:

import { describe, it, expect, vi } from 'vitest';

Rendering

• Import from @testing-library/react:

import { render, screen, fireEvent } from '@testing-library/react';

• Import jest-dom matchers:

import '@testing-library/jest-dom';

• Render components directly with render(<Component />) -- no custom wrapper needed

Interactions

• Use fireEvent for simple click/change events
• Use userEvent from @testing-library/user-event for complex interactions (typing, keyboard, focus):

import userEvent from '@testing-library/user-event';

Mocking

• Use vi.fn() for callback/handler spies
• Assert with toHaveBeenCalledTimes, toHaveBeenCalledWith, not.toHaveBeenCalled

Structure

• Single top-level describe('<ComponentName>', () => { ... })
• Flat it('should ...') cases for simple components
• Nested describe blocks for hooks or components with many concern areas