code testing
writing and organizing test
For Unit tests it's best that test files sit right alongside the module or component they test.
src/
βββ components/
β βββ Button.tsx
β βββ Button.test.tsx <-- Co-located unit test
β βββ Button.module.css
βββ utils/
β βββ formatCurrency.ts
β βββ formatCurrency.test.ts
For E2E & integrations tests
Use ./tests for System-Level Tests: Reserve a root-level ./tests or ./e2e folder exclusively for end-to-end testing, heavy integration flows, or fixture data that spans the entire app.
Definitions
-
test driven development (TDD): is a methodology or philosophy of developing software where you first define requirement / how you want your code to behave before you have the actual code.
So you first write failing tests and then write the code and features that eventually pass all the tests.
kind of a satisfying way to develop bc you go from all red tests and make them success one by one. -
unit test: tests individual classes and functions
- Integration testing: tests that components work and talk with each other correctly. A subset of connected components (e.g., API route + database, or Component + Redux Store).
- Data transfer & boundaries: Does component A pass valid payload structures to service B?
- end to end test: is more complex and tries to simulate user behavior. Tries to mimmick a real user story by actually booting up a browser and clicking around.
- list of tools for this type of testing here: automated testing
- I think the 'end to end' term comes from trying to test both 'ends' of an app (front-end -> backend).
Examples
- Unit Test: You test your
calculateTax(price, state)function isolated with mock inputs. No API, no DB. - Integration Test: You test the
Node.js APIendpoint route against a real (or dockerized) localPostgres Database. You send a JSON request payload, make sure the database row is created properly, and return a 200 response. You mock the external Stripe service so you don't hit live external APIs. - E2E Test: A headless browser (using Playwright or Cypress) launches, clicks the actual button on the live UI, fills out a test credit card, hits the real/staging API and database, contacts Stripe's sandbox environment, and verifies the "Order Confirmed" screen appears.