Adding Tests to Your Tempo Project

Most Tempo projects ship with zero tests. This means every change is a gamble — you might fix one thing and break three others without knowing until a user reports it. Tests are automated checks that verify your app works correctly. They run in seconds and catch bugs before your users do.

Set up Storybook for visual testing and use Chromatic for visual regression testing to catch when design updates break existing components. Add @testing-library/react for interaction testing. Configure axe-core for automated accessibility checks in Storybook

Test components with real-world content lengths — longer text, missing data, and special characters. Test keyboard navigation and screen reader behavior since Tempo won't generate these correctly by default. Run automated accessibility checks on every component

Unit tests check individual functions in isolation — does this function calculate the right total? Integration tests check that multiple pieces work together — does submitting this form save to the database? End-to-end (E2E) tests simulate a real user — can someone sign up, log in, and complete a purchase? Start with E2E tests for your most critical flows, then add integration tests for your API endpoints.

Set up your tests to run automatically on every code push using GitHub Actions or a similar CI service. This way, you'll know immediately if a change breaks something. A basic CI pipeline runs your tests, checks for TypeScript errors, and builds the project. If any step fails, the push is flagged before it reaches production.