Testing — Part 3: Setting Up React Testing Library

Ticket: SCRUM-126 | Status: Approved ✅

What This Task Was About

With Vitest configured (Part 2), the next step was to install React Testing Library (RTL) so we can write component tests for the web/ and extension/ workspaces. RTL lets you test React components the way a user would interact with them — finding elements by text, clicking buttons, checking what's rendered — rather than testing internal implementation details.

Acceptance criteria:

• @testing-library/react and @testing-library/jest-dom installed
• Basic test utilities configured
• Custom render wrapper (optional — deferred until actual component tests are needed)

---

What I Did

Installed the two core testing packages and confirmed the basic setup worked. Decided to skip writing a custom render wrapper for now — that's something you write once you have actual components to test with context providers, routers, etc. Setting up the plumbing first made more sense.

Packages installed:

• @testing-library/react — renders and interacts with React components in tests
• @testing-library/jest-dom — adds DOM-specific matchers: .toBeInTheDocument(), .toHaveTextContent(), .toBeVisible()

---

Mistakes and Fixes

Issue: Testing packages in the wrong section of package.json

I installed @testing-library/react and @testing-library/jest-dom under dependencies (production) instead of devDependencies.

Why it matters:

	dependencies	devDependencies
Shipped to users?	Yes — bundled into production	No — only used during dev/CI
Examples	React, Firebase SDK	Vitest, RTL, ESLint

Testing libraries will never run in a user's browser. Putting them in dependencies bloats the production bundle for no reason.

Fix: Reinstall with --save-dev:

npm install --save-dev @testing-library/react @testing-library/jest-dom

---

What a Custom Render Wrapper Is (For Later)

When components need providers (<Router>, <AuthContext>, etc.), you'll create a custom render helper:

// src/test/utils.tsx
import { render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';

const AllProviders = ({ children }) => (
  <MemoryRouter>{children}</MemoryRouter>
);

const customRender = (ui, options?) =>
  render(ui, { wrapper: AllProviders, ...options });

export * from '@testing-library/react';
export { customRender as render };

Then in tests, import from ../test/utils instead of @testing-library/react — all providers are included automatically.

---

Key Takeaways

• Always install testing tools with --save-dev. Rule of thumb: if it only runs during development or CI, it's a devDependency.
• @testing-library/jest-dom is what gives you human-readable DOM matchers. Without it: expect(el).not.toBeNull(). With it: expect(el).toBeInTheDocument().
• A custom render wrapper is worth writing once you have real components that need providers — not before.
• RTL's philosophy: test what the user sees, not what the component does internally. Query by role, label, or text — not by class names or internal state.

---

Session Notes & Code Review Feedback

Katie Nguyen (2026-02-27):

Configure test utilities and custom render: currently I just completed setup, will come back for this when I write actual tests.

---

Katie Nguyen (2026-03-02):

[Code Review - Changes Needed] SCRUM-126: Set up React Testing Library

One fix needed:

Issue: Testing packages in the wrong section of package.json

@testing-library/react and @testing-library/jest-dom are listed under dependencies (production) in the root package.json. They should be in devDependencies. Testing libraries will never run in a user's browser, so they have no business being in dependencies.

Fix:

npm install --save-dev @testing-library/react @testing-library/jest-dom

Note on skipping custom render: That is a reasonable call. Custom render wrappers make more sense to write once you have actual components to test. Setup first, utilities later — good instinct.

Fix the devDependencies issue and move back to In Review when done.

---

Katie Nguyen (2026-03-02):

[Code Review Feedback] SCRUM-126: Set up React Testing Library — APPROVED ✅

@testing-library/react and @testing-library/jest-dom are now correctly in devDependencies. Setup looks good.