Skip to content

Add React Testing Library framework for frontend component testing#9020

Closed
Copilot wants to merge 3 commits intomainfrom
copilot/add-testing-framework-frontend
Closed

Add React Testing Library framework for frontend component testing#9020
Copilot wants to merge 3 commits intomainfrom
copilot/add-testing-framework-frontend

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 5, 2026

Summary

Establishes a component testing framework for the frontend using React Testing Library + Vitest/jsdom. Previously, tests covered only pure logic (utilities, reducers, graph construction) — no DOM or component-level tests were possible.

Infrastructure

  • Add @testing-library/react, @testing-library/user-event, @testing-library/jest-dom, jsdom as dev deps
  • Configure Vitest with environment: 'jsdom' and a global setup file in vite.config.mts

src/tests/setup.ts

  • Extends Vitest's expect with jest-dom DOM matchers (toBeInTheDocument, toHaveAttribute, etc.)
  • Registers afterEach(cleanup) to prevent DOM leaking between tests

src/tests/test-utils.tsx — reusable render wrapper

// Wraps component with Redux store + ChakraProvider; returns render result + store
const { getByText, store } = renderWithProviders(<MyComponent />, { store: prebuiltStore });

Accepts an optional store parameter for tests that need pre-seeded Redux state.

Example tests

  • WavyLine.test.tsx — pure component, uses render directly; demonstrates SVG attribute assertions
  • IAIImageFallback.test.tsx — Chakra UI component, uses renderWithProviders; demonstrates label/icon conditional rendering tests

Related Issues / Discussions

Closes #5440

QA Instructions

cd invokeai/frontend/web
pnpm test:no-watch
# 34 test files, 755 tests — all pass

New test files can be verified individually:

pnpm test:no-watch src/common/components/WavyLine.test.tsx
pnpm test:no-watch src/common/components/IAIImageFallback.test.tsx

Merge Plan

No special merge considerations.

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • ❗Changes to a redux slice have a corresponding migration
  • Documentation added / updated (if applicable)
  • Updated What's New copy (if doing a release after this PR)

Copilot AI linked an issue Apr 5, 2026 that may be closed by this pull request
1 task
Copilot AI and others added 2 commits April 5, 2026 00:14
Copilot AI changed the title [WIP] Add testing framework for frontend using React Testing Library Add React Testing Library framework for frontend component testing Apr 5, 2026
Copilot AI requested a review from lstein April 5, 2026 00:29
@lstein
Copy link
Copy Markdown
Collaborator

lstein commented Apr 6, 2026

Still thinking about this...

@lstein lstein closed this Apr 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[enhancement]: Testing framework for front end [enhancement]: Controlnet Models should reset "auto processing" when switched

2 participants