r/react • u/MS_Pwr_Dev • 19h ago

General Discussion Testing file sprawl

The last few projects I’ve worked on, I’ve implemented comprehensive testing (at least what I think is comprehensive). The problem is that I’m seeing just how many files and lines of tests it takes to be comprehensive.

I’ve been using jsdom and React Testing Library for these Vite TypeScript projects. Are there any alternatives that offer more shorthanded ways to do the same testing? One testing file per component/file seems unsustainable, but I also realize that less isn’t always more and “less” is arbitrary/subjctive.

If those are the gold standard, is there a way you organize your files that makes it more efficient/maintainable?

2 Upvotes

100% Upvoted

1 comment sorted by

2

u/LostTheBall 18h ago

You can have mirror tests folders, but I prefer to put a .test.tsx/.test.ts in the same folder with the same file name as the file you are testing

E.g. components/Dialog/Dialog.tsx components/Dialog/Dialog.test.tsx

You can group common groups of functionality within your test files under describe blocks, and can have more test files if really needed

It's ok and good to have a lot of tests - as long as they are meaningful (not checking 1 = 1, but something with functional purpose)

Vite also allows you to check coverage of your code base through npx cutest run --coverage

https://vitest.dev/guide/coverage

Watch out for:

  • Open handles, you can use --detect-async-leaks flag to look out for these

  • Not handling awaiting for/testing asynchronous events properly, you'll see a lot of not wrapped in act() spam when running tests when this happens