Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Testing React: Vitest, React Testing Library and Mocking APIs with MSW
The practical way to test React is to run React Testing Library, which queries the UI as a user does, on Vitest, which reuses the Vite config, and to fake the API at the network level with MSW without touching the code. In Bookstore we test the pure applyChange function, useDebouncedValue and useCart with renderHook, BookCard with user-event, and the catalog and checkout screens through the real route tree in a memory router, with real failures for getBy vs findBy and leaking store state.
Testing Like a User with Angular Testing Library: render, Role Queries and user-event
Testing like a user means finding elements by role and label and interacting in the order a user does: the test written with fireEvent.input failed because it skipped the blur that marks the field as touched, while the user-event version passed. On Bookstore's Signal Forms checkout form we cover render(), query priority, error messages tied with aria-describedby, findBy for async content, navigation with routes and a comparison with the same TestBed test, all with real runs.