Professional UI Testing

Testing is what separates Junior code from Senior code. In large applications, testing is the Insurance Policy that allows you to refactor without fear. We focus on React Testing Library (RTL) because it forces you to test like a user, not an implementation detail.

1. Vitest (The Modern Runner)

Vitest is the lightning-fast successor to Jest. It integrates perfectly with Vite and has a similar API. It is responsible for running your tests and providing the "Watch" mode that developers love.

2. The RTL Philosophy

Don't test the internal state of a component. Test what the user sees. Use queries like getByRole or getByText. If the user can't find a button by its text, your test shouldn't be able to either. This results in tests that don't break just because you changed a variable name.

3. Mocking APIs with MSW

Architect Rule: Never hit a real API in a unit test. Use Mock Service Worker (MSW). MSW intercepts network requests at the browser level and returns fake data. This makes your tests fast, reliable, and completely offline.

4. Interview Mastery

Q: "What is the 'AAA' pattern in testing?"

Architect Answer: "It stands for **Arrange, Act, Assert**. 1) Arrange: Set up the component and mock data. 2) Act: Perform the user action (e.g., click a button). 3) Assert: Check that the UI updated as expected. Following this pattern ensures your tests are clean, readable, and consistent across the entire development team."