Repository navigation
chore(testing): Consolidate individual icon tests into a single auto-discovery test #1529
Description
Current Behavior
We currently have 8 separate test files for icon components under src/__testing__/:
AddIcon.test.tsxApplicationIcon.test.tsxBusIcon.test.tsxCircleIcon.test.tsxCodeIcon.test.tsxPeopleIcon.test.tsxReplyIcon.test.tsxTableChartIcon.test.tsx
Each file follows the exact same pattern — render the icon and assert width/height. This means:
- Only 8 out of 230+ icon components have test coverage.
- Every new icon requires manually creating a new test file.
- There's a lot of duplicated boilerplate across files.
- 🎨 Wireframes and designs for Sistent site in Figma (open invite)
Activity
Rajesh-Nagarajan-11 commentedon May 11, 2026
Is it possible to dynamically tests all the icons?
rishiraj38 commentedon May 11, 2026
Yeah I think so! We could do a wildcard import from the icons barrel and dynamically loop over all exports with describe.each. I'll explore this and raise a PR.
rishiraj38 commentedon May 11, 2026
@Rajesh-Nagarajan-11
I looked into this and yes we can dynamically test all icons with a single test file. Here's the approach I went with:
We do
import * as AllIcons from '../icons'to pull in everything from the barrel file, then filter for functions (since TS types get stripped at runtime). After that describe.each loops over every icon and runs 3 tests, renders without crashing, produces an<svg>, and forwards width/height props.This gives us 690 tests covering all 230 icon components, and the best part is it's zero maintenance, whenever someone adds a new icon and exports it from index.ts, the test picks it up automatically.
Rajesh-Nagarajan-11 commentedon May 11, 2026
Yeah, sounds good , go-ahead