Module 4: Building Your First AppLesson 4 of 6

Lesson 4·4 min

Testing Your Code

Verify your app works before shipping

Testing Your Code

Testing ensures your app works correctly. Let's cover how to test with Claude's help.

Manual Testing

Always test manually first:

Terminal

# Start your dev server

$ npm run dev

# Open in browser

$ open http://localhost:3000

# Test every feature:

# ✅ Forms submit correctly

# ✅ Validation shows errors

# ✅ Data persists after refresh

# ✅ Mobile layout works

# ✅ Links go to right places

▌

Tip

Test on both desktop AND mobile. Use Chrome DevTools (F12) to simulate mobile devices.

Having Claude Help Test

Terminal

> Review the form component and tell me what edge cases I should test

Claude: Here are edge cases to test:

1. Empty submission - should show required errors

2. Invalid email format - "test@" should fail

3. Very long message (>1000 chars) - should truncate or warn

4. Special characters in name - "O'Connor" should work

5. Rapid double-submit - should prevent duplicate

6. Network error - should show error message

7. Slow connection - should show loading state

▌

Writing Automated Tests

Ask Claude to add tests:

Terminal

> Add unit tests for the validation functions using Jest

Claude: I'll create tests for the validators:

tests/validation.test.js

✓ validates correct email format

✓ rejects invalid email format

✓ requires name field

✓ limits message to 500 characters

...

▌

Running Tests

Terminal

# Run the test suite

$ npm test

PASS tests/validation.test.js

✓ validates correct email format (2ms)

✓ rejects invalid email format (1ms)

✓ requires name field (1ms)

Test Suites: 1 passed, 1 total

Tests: 3 passed, 3 total

▌

Aussie Note

No time for full test suites? At minimum, test the happy path and one error case for each feature. 🧪

Bug Fixing Workflow

Found a bug? Here's the workflow:

Terminal

# 1. Describe the bug clearly

> When I enter "test@example" (no .com), the form submits anyway.

> It should reject emails without a valid domain.

# 2. Claude fixes it

Claude: I'll update the email regex to require a TLD...

# 3. Test the fix

$ npm test

# Also manual test

# 4. Confirm it works

> The email validation now works. Let's move on.

▌

Checklist Before Shipping

Run through this checklist:

Check	Status
All features work	☐
Forms validate correctly	☐
Error states show properly	☐
Mobile responsive	☐
No console errors	☐
Loading states exist	☐
Data persists correctly	☐
Edge cases handled	☐

Terminal

> Before we deploy, review the code for any issues

Claude: I'll do a code review...

Issues found:

1. Missing error boundary in App.tsx

2. API key exposed in frontend code

3. No loading state on async operations

Should I fix these?

▌

Warning

Never skip testing "because it's a small change." Small bugs create big problems!

Key Takeaways

Manual test after every feature
Ask Claude for edge cases to test
Add automated tests for critical logic
Follow bug fix workflow: describe → fix → test
Use the pre-ship checklist

Iterating with Claude

Deploying Your App