test(components): add tests for Button, Badge, Divider, Link, Typography

[Chibuzor-Nwemambu]

Summary

• Batch 1 of test: add component test infrastructure #214's component test rollout: adds behavior tests for Button (+ Button.Icon), Badge, Divider, Link, and Typography (+ Typography.Header) — 38 tests total (rebalanced from an initial 42 → briefly 70 → 36 addressing PR review on test quality, then +2 for the accessibilityState merge regression tests below).
• Adds shared test infra reused by all future batches: test-utils.tsx (render wrapped in EDSProvider), an @expo/vector-icons mock in jest.setup.ts (fixes act() warnings from async font-loading state, while preserving real static properties like .font so useEDS.ts isn't silently broken), and @types/react-test-renderer (fixes RNTL query results resolving to TS's error type).
• Narrows jest.config.cjs's untested-component checklist: removes Button/Badge/Divider/Link/Typography (now tested), and also drops Dialog/ErrorBoundary/Icon/Label/Portal/Scrim/_internal (internal pieces covered indirectly via consumers) and Paper/PressableHighlight (slated for removal/replacement, not worth testing now).
• Adds regression tests for fix(components): make component's own disabled state win accessibilityState merges #221 (merged) covering Button/Button.Icon's accessibilityState merge — the Button.Icon case specifically targets the JSX-ordering bug that PR fix(components): make component's own disabled state win accessibilityState merges #221's review caught, verified to fail against that pre-fix code.

Contributes to #214 — does not close it (batches 2, SelectionControls, and the new-component-workflow update are still outstanding).

Test plan

• pnpm test — 38/38 passing across 5 suites
• pnpm lint — clean
• pnpm check-types — clean
• pnpm build — clean, confirmed test-utils.tsx doesn't leak into dist/

[Chibuzor-Nwemambu]

@claude review

[claude]

Claude finished @Chibuzor-Nwemambu's task in 1m 54s —— View job

---

Code review — PR #216

• Read changed files & test infra
• Review test coverage & correctness
• Review config/tsconfig changes
• Post review feedback

Nicely done — the tests exercise real behavior (roles, press handling, disabled state, icon rendering) rather than snapshots, and the shared infra is well thought through and thoroughly commented. pnpm test/lint/check-types/build are all green per the description, and I verified the assertions line up with the actual component sources (Divider a11y defaults, Link accessibilityRole="link" + open-in-new icon, Button accessibilityRole="button" + disabled). This is a solid foundation for the remaining batches.

A few observations, all non-blocking:

Strengths worth calling out

• The jest.config.cjs guard (lines 53–82) that fails loudly when a test file exists but the dir is still ignored is exactly the right safeguard for a checklist-driven rollout — it turns a silent "green checkmark, no coverage" into a hard error.
• The @expo/vector-icons mock preserving static props (.font, glyph maps) via Object.assign instead of dropping them is a careful touch — a naive mock would have silently broken useEDS.ts's ...MaterialCommunityIcons.font spread.
• test-utils.tsx relying on ES modules giving the explicit export { renderWithProviders as render } precedence over the export * star export is correct and clean.

Suggestions (optional)

1. Smoke tests don't assert the variant actually applied. The it.each(...)("renders without error for tone/weight/tracking %s") cases (e.g. Badge.test.tsx:31, Typography.test.tsx:25) only assert getByText(...) is truthy — they'd still pass if tone/weight were silently ignored by the component. Consider asserting one representative style/prop per axis (at least for the default vs. one non-default) so these guard against real regressions rather than just crash-free rendering. Fine to leave as smoke tests if that's the intent, but worth a deliberate call.

2. UNSAFE_getByProps({ name }) couples the icon assertions to the mock. In Button.test.tsx:35 and Link.test.tsx:26/33, the query works because the mock forwards name onto a Text host node. It's functional, but UNSAFE_* matches any element with that prop and is brittle to internal changes. A testID on the icon or an accessibility-based query would be more robust and drop the UNSAFE_ escape hatch. Minor.

3. Divider a11y-override gap (pre-existing, out of scope). Divider.tsx:11-16 spreads {...rest} after accessible={false} / importantForAccessibility="no", so a consumer passing accessible would override the defaults. The new test (Divider.test.tsx:11) locks in the defaults but not the override path. Not something to fix here — just flagging in case it's worth a follow-up, since the ordering makes the "hidden from AT" guarantee overridable.

4. Icon mock isn't forwardRef. If any component ever forwards a ref down to an icon set, it'd emit a ref warning under test. Nothing in the current tests exercises this, so no action needed now — noting it so it's not a surprise later.

None of these block merging. The core question for a test PR — do the tests assert meaningful behavior and is the infra sound? — is a clear yes.
· 214-batch-1-tests

[Chibuzor-Nwemambu]

Addressed the review feedback:

1. Smoke tests not asserting the variant applied — fixed, and broader than just Badge/Typography. Auditing the same pattern turned up zero coverage at all (not even crash-only) for Button's tone/size/variant and Link's size axes. Brought all four components to the same standard in 924ed6d: an it.each crash check per axis value, plus one real style-effect assertion per axis (comparing two representative values via a flattened style rather than hardcoded exact token values, so they don't churn if design tokens change later).

2. UNSAFE_getByProps({ name }) coupling icon assertions to the mock — left as-is per your own "Minor" call; the alternative (adding testIDs to icons) means touching source components purely for testability, which felt like scope creep for a test-only PR. Worth revisiting if a future batch wants it.

3. Divider's a11y-override gap — verified accurate ({...rest} does spread after accessible={false}/importantForAccessibility="no"). Filed as its own follow-up rather than fixed here, since it's a genuine judgment call (should a consumer be able to override that at all?) rather than a clear-cut bug — will track separately.

4. Icon mock not forwardRef — noted, no action needed until something actually forwards a ref to an icon.

Also worth flagging: while writing batch-2's tests, found and fixed an unrelated but related-in-kind bug — Input.tsx was clobbering a caller-supplied accessibilityState instead of merging it (unlike Button/TextArea, which already merge correctly). That's issue #217, fixed in PR #218.

[Chibuzor-Nwemambu]

Quick correction to my last comment: the fix for point 1 initially added a separate `it.each` crash-loop (every enum value) alongside each effect assertion, which ballooned the suite to 70 tests. On reflection that was overkill — comparing two representative values already implicitly proves neither crashes, and the enum→token-key mapping is backed by TypeScript's own `satisfies Record<...>` constraints, so exhaustively sweeping every value added little real coverage. Merged each pair into one comparative test per axis in ce53a81: 70 → 36 tests.

[Chibuzor-Nwemambu]

@claude review

[claude]

Claude finished @Chibuzor-Nwemambu's task in 1m 48s —— View job

---

Code review — PR #216

• Read changed files & test infra
• Review test coverage & correctness
• Review config/tsconfig changes
• Post review feedback

The re-review looks good. All four prior suggestions were handled sensibly — the smoke tests now assert real style effects (comparing two representative values via flattened style rather than hardcoded token values, so they survive token churn), and points 2–4 were reasonable judgment calls to defer/track. I re-verified the new assertions against the sources:

• accessibilityState regression tests — correct. Button.tsx:63-65 spreads ...pressableProps.accessibilityState then overrides disabled: disabled ?? false, so a caller passing { selected: true, disabled: true } yields { selected: true, disabled: false } exactly as asserted. The Button.Icon variant targets the JSX-ordering bug fix(components): make component's own disabled state win accessibilityState merges #221 fixed — good regression anchor.
• Effect assertions (Button.test.tsx:64-114, Badge, Link, Typography) — these now guard against a variant being silently ignored, which is the meaningful upgrade over crash-only smoke tests. The comparative "A ≠ B" shape is a nice choice: it proves the axis has some effect without coupling to specific token values.
• The jest.config.cjs checklist narrowing reads cleanly, and the comment explaining why Dialog/Icon/Paper/etc. are off-list (covered indirectly vs. slated for removal) is exactly the context a future contributor needs.

One observation (non-blocking)

The two-render()-calls-in-one-test pattern is correct but implicit. In the effect tests (e.g. Button.test.tsx:64-76, Typography.test.tsx:24-36), each test renders twice without cleanup() between. This works because RNTL rebinds screen to the most recent render, and each test captures the first value before the second render() runs — so screen.getByRole("button") never sees two trees at once. It's a subtle ordering contract, though: if someone later reorders the capture to after the second render, or adds a third comparison, the getByRole could start matching the wrong (or multiple) trees. Two ways to make the invariant explicit if you want to harden it for the batches to come:

// Option A — bind queries to each render explicitly, no reliance on screen rebinding
const { getByRole } = render(<Button label="Save" tone="accent" />);
const accentBorder = flattenStyle(getByRole("button"))?.borderColor;

or a small helper that renders, extracts one value, and unmounts — since all these tests follow the identical "render → read one style prop → discard" shape, that'd also cut the duplication. Purely a maintainability call; the current tests are correct and green.

Everything else — infra soundness, the @expo/vector-icons mock preserving statics, the test-utils alias mirrored across jest.config.cjs/tsconfig.json, build not leaking test-utils.tsx into dist/ — remains solid. No blockers; nice incremental foundation for batch 2.
· 214-batch-1-tests

[pomfrida]

LGTM 👍