Posts

Showing posts with the label msw

Process of applying TDD to a NextJS project

Image
Introduction Test-Driven Development (TDD) is an advanced software development methodology where tests are written before the actual source code is implemented. This process operates in a repetitive cycle: Red (Write a failing test) -> Green (Write the minimum source code to make the test pass) -> Refactor (Optimize the code structure). Advantages : Improve source code quality: Minimize potential bugs right from the initial development phase. Better system design: Thinking about testing first helps you build highly modular, loosely coupled and easy-to-maintain modules. Confident Refactoring: You can comfortably improve and optimize code without fear of breaking existing features, thanks to the automated test system protection. Living documentation: Test cases act as precise specification documentation, helping team members clearly understand how the system operates. Reduce Debugging Time : TDD helps detect errors right at the moment "just finished typing". The c...

Guide to Mocking API with MSW in NextJS

Image
Introduction MSW (Mock Service Worker) is the most popular library for modern projects, used to simulate APIs by intercepting network requests at the network layer. Instead of mocking at the application layer, MSW operates at the Service Worker layer (browser) and Node.js interception (server-side). Advantages: Simulate everything: Method, URL, Header, Status code, Delay. Help Frontend develop independently when Backend has not finished the API. Runs on both the browser (Browser) and NodeJS environment (SSR). Does not change the API call logic code, only needs request interception configuration. Clean mock code, written like writing a real API. Usage: You define handlers. When the application calls a URL, MSW catches that request and returns the response you defined without ever actually sending the request to the server. Detail Run the following commands to install and create the mockServiceWorker.js file # install yarn add msw # create mockServiceWorker.js npx msw init public/ ...