Unit, Integration & E2E with Jest and Puppeteer

Software testing is a crucial practice for ensuring application reliability, code quality, and scalable architecture. In JavaScript development, testing generally spans three primary levels: Unit Testing, Integration Testing, and End-to-End (E2E) Testing.

• Core Testing Pillars
• To establish an effective testing environment, three key components are required:
• 1. Test Runner (e.g., Mocha, Jest): Discovers test suites, executes tests, and reports results in the terminal.
• 2. Assertion Library (e.g., Chai, Expect): Compares expected values against actual output to evaluate test pass/fail conditions.
• 3. Headless Browser (e.g., Puppeteer): Runs tests in an automated browser environment without a graphical user interface.
• Jest, created by Meta (Facebook), is the most popular JavaScript testing framework because it combines a test runner and assertion library in a single package. You can run automated tests continuously using the jest --watchAll command.
• 1. Unit Testing
• Unit tests focus on testing small, isolated functions using Jest matchers such as toBe() and toBeTruthy().
• JavaScript
• const { generateResult } = require("../js/lib.js");
• test("testing generate result", () => {
• expect(generateResult("1", "This is a test"))
• .toBe("User ID: 1 created an article titled This is a test");
• });
• 2. Integration Testing
• Integration testing verifies that multiple functions or modules work together as expected to deliver a specific feature or workflow.
• 3. End-to-End (E2E) Testing with Puppeteer
• E2E testing uses tools like Puppeteer to simulate complete user interactions within a real browser environment.
• Handling Async Timeouts in Jest
• Jest enforces a default 5-second timeout for tests. Because browser automation tasks often exceed this limit, you can pass done into the test callback function and set a custom timeout (e.g., 30000ms) as the third parameter:
• JavaScript
• const puppeteer = require("puppeteer");
• test("test add post", async (done) => {
• const browser = await puppeteer.launch({
• headless: false,
• slowMo: 80,
• args: ["--window-size=1920,1080"],
• });
• const page = await browser.newPage();
• await page.goto("http://127.0.0.1:5500");
• await page.click("input#userid");
• await page.type("input#userid", "1");
• await page.click("input#title");
• await page.type("input#title", "This is a test");
• await page.click("textarea#article");
• await page.type("textarea#article", "This is a test article");
• await page.click("#addNewPostBtn");
• await browser.close();
• done();
• }, 30000);
• 4. Mocking in Jest
• Mocking allows developers to replace external network requests or third-party libraries with custom implementations, ensuring tests remain isolated and predictable.
• To mock node-fetch, create a mock file in __mocks__/node-fetch.js:
• JavaScript
• const fetch = (url, postObject) => {
• console.log("node-fetch mock used");
• return {
• json: () => {
• const body = JSON.parse(postObject.body);
• return body;
• }
• };
• };
• module.exports = fetch;