Posts

Showing posts with the label frontend testing

Guide to Setting Up Playwright E2E Testing in NextJS

Image
Introduction Playwright is a powerful automated testing framework developed by Microsoft, allowing for End-to-End (E2E) testing across modern browsers such as Chromium, Firefox, and WebKit. Key advantages include fast execution speed due to its event-driven architecture, auto-wait capabilities that reduce "flaky" errors, default support for parallel execution, and the Codegen tool which helps generate automated test scripts by recording user interactions. Prerequisites This article is a continuation of my previous posts, so I will not provide the test code files again; please review them to have the source code ready before proceeding. Detail First, if your project does not have Playwright yet, you can set it up quickly as follows; this command will install the necessary packages and create a config file along with demo test files: yarn create playwright Or install the following packages manually: yarn add -D @playwright/test yarn playwright install Update playwright.c...

Guide to Setting Up Jest Testing for a NextJS Project

Image
Introduction In this article, I will guide you on adding Jest (currently the most popular testing library) to test for projects using the NextJS framework. This integration helps developers automate the source code testing process, from logical functions (Unit Testing) to user interface testing (Integration Testing) in the Node.js environment. Here are the prominent advantages: Fast and effective: Jest runs tests in parallel, saving significant time as the project scales. Built-in Support: Next.js provides the next/jest configuration, making setup extremely simple, automatically handling CSS files, images, and framework-specific features. Excellent Watch Mode: Jest has the ability to detect recently changed files and only run related tests, keeping the development workflow smooth. Coverage Reports: This tool has built-in capability to statistic the percentage of source code tested, helping you assess application quality and reliability visually. Rich ecosystem: When combined with React...