Intermediate5 min readShare
Was this chapter helpful?
Share
Make sure your project works before your users find out it doesn't. Testing catches bugs so you can ship with confidence.
Testing means checking that your website or app does what you expect. You wouldn't hand in an essay without proofreading it — testing is proofreading for your project.
Find problems before your users do. A test can spot a broken button in seconds.
When you add new features, tests make sure you didn't accidentally break something else.
Manually clicking through every page gets old fast. Tests do it for you automatically.
Teams with tests can push updates more often because they know things still work.
Think of these as different levels of checking — from tiny checks to big-picture tests.
Tests one tiny piece at a time. Like checking that a “calculate total” function gives the right answer. Fast and simple.
Start hereTests that pieces work together. Like checking that clicking “Add to Cart” actually adds the item and updates the total.
Next stepSimulates a real user clicking through your whole site. Like a robot opening your browser, filling out a form, and checking the result.
Most realisticTell your AI tool which one to use, and it will set everything up for you.
Unit & Integration Tests
Super fast testing tool that works great with modern projects. Perfect for checking individual functions and components.
End-to-End Tests
By Microsoft. Opens a real browser and clicks around your site like a user would. Tests on Chrome, Firefox, and Safari.
End-to-End Tests
Popular E2E tool with a nice visual interface. You can watch your tests run in real time. Great documentation for beginners.
You don't need to test everything. Start with what matters most.
Forms and user input
If someone fills out a sign-up form and it breaks, you lose a user.
Payment and checkout flows
Money is involved. This must work perfectly every time.
Login and authentication
If users can't log in, nothing else matters.
Core features your users rely on
The main thing your app does — make sure it actually does it.
Navigation and routing
Can users get to every page? Do links work?
Edge cases and error states
What happens when someone submits an empty form or enters weird data?
Copy these prompts and paste them into your AI coding tool. It will set up testing and write tests for you.
Set up testing in your project
"Add Vitest to my project for unit testing. Set up the configuration file and create a simple example test that passes. Also add a test script to my package.json so I can run tests easily."
Write tests for your forms
"Write tests for my contact form. Test that: the form renders correctly, required fields show an error when submitted empty, the email field rejects invalid emails, and a successful submission shows a confirmation message. Use Vitest and React Testing Library."
Add end-to-end tests
"Set up Playwright for end-to-end testing. Create tests that: open the homepage, check the navigation links work, fill out the main form and submit it, and verify the success page appears. Make the tests run in headless mode."
Test an existing feature
"Look at my project and write tests for the most critical user flows. Focus on anything involving forms, authentication, or data submission. Use Vitest for unit tests and explain what each test checks."
Copy-paste these prompts into your AI tool to apply what you just learned.
ADD BASIC TESTS
"Add basic tests to my app. Write tests for my [component/function/API route] that check [expected behavior]. Use Vitest and Testing Library."
REPRODUCE AND FIX A BUG
"My app has a bug where [describe bug]. Write a test that reproduces this bug, then fix the code so the test passes."
Pro tip:You don't need 100% test coverage. Even a handful of tests on your most important features is far better than no tests at all. Start small and add more over time.
