JavaScript Testing Frameworks: Complete Testing Guide

Testing is crucial for building reliable JavaScript applications. This comprehensive guide covers popular testing frameworks, testing strategies, and best practices for creating robust test suites.

Testing Fundamentals

Types of Testing

// Unit Testing - Testing individual functions/components
function add(a, b) {
  return a + b;
}

// Test for the add function
test('add function should correctly add two numbers', () => {
  expect(add(2, 3)).toBe(5);
  expect(add(-1, 1)).toBe(0);
  expect(add(0, 0)).toBe(0);
});

// Integration Testing - Testing how parts work together
class Calculator {
  constructor() {
    this.result = 0;
  }

  add(value) {
    this.result += value;
    return this;
  }

  multiply(value) {
    this.result *= value;
    return this;
  }

  getResult() {
    return this.result;
  }
}

// Integration test
test('Calculator should handle chained operations', () => {
  const calc = new Calculator();
  const result = calc.add(5).multiply(2).add(3).getResult();
  expect(result).toBe(13);
});

// E2E Testing - Testing complete user workflows
// This would typically be in a separate e2e test file
describe('User Login Flow', () => {
  test('User can login with valid credentials', async () => {
    await page.goto('/login');
    await page.fill('#username', 'testuser');
    await page.fill('#password', 'password123');
    await page.click('#login-button');
    await expect(page).toHaveURL('/dashboard');
  });
});

Jest Testing Framework

Basic Jest Setup

// package.json
{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  },
  "jest": {
    "testEnvironment": "node",
    "collectCoverageFrom": [
      "src/**/*.js",
      "!src/index.js"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 80,
        "functions": 80,
        "lines": 80,
        "statements": 80
      }
    }
  }
}

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  moduleNameMapping: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.js'
  },
  collectCoverageFrom: [
    'src/**/*.{js,jsx}',
    '!src/index.js',
    '!src/serviceWorker.js'
  ],
  coverageReporters: ['text', 'lcov', 'html'],
  testMatch: [
    '<rootDir>/src/**/__tests__/**/*.{js,jsx}',
    '<rootDir>/src/**/?(*.)(test|spec).{js,jsx}'
  ]
};

// setupTests.js
import '@testing-library/jest-dom';

// Global test utilities
global.mockLocalStorage = (() => {
  let store = {};
  return {
    getItem: (key) => store[key] || null,
    setItem: (key, value) => store[key] = value.toString(),
    removeItem: (key) => delete store[key],
    clear: () => store = {}
  };
})();

Object.defineProperty(window, 'localStorage', {
  value: global.mockLocalStorage
});

Jest Testing Patterns

// Math utilities to test
class MathUtils {
  static factorial(n) {
    if (n < 0) throw new Error('Negative numbers not allowed');
    if (n === 0 || n === 1) return 1;
    return n * this.factorial(n - 1);
  }

  static isPrime(num) {
    if (num < 2) return false;
    for (let i = 2; i <= Math.sqrt(num); i++) {
      if (num % i === 0) return false;
    }
    return true;
  }

  static async calculateAsync(a, b, operation) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        switch (operation) {
          case 'add':
            resolve(a + b);
            break;
          case 'multiply':
            resolve(a * b);
            break;
          default:
            reject(new Error('Invalid operation'));
        }
      }, 100);
    });
  }
}

// math.test.js
describe('MathUtils', () => {
  describe('factorial', () => {
    test('should calculate factorial correctly', () => {
      expect(MathUtils.factorial(0)).toBe(1);
      expect(MathUtils.factorial(1)).toBe(1);
      expect(MathUtils.factorial(5)).toBe(120);
    });

    test('should throw error for negative numbers', () => {
      expect(() => MathUtils.factorial(-1)).toThrow(
        'Negative numbers not allowed'
      );
    });
  });

  describe('isPrime', () => {
    test.each([
      [2, true],
      [3, true],
      [4, false],
      [17, true],
      [25, false],
    ])('should return %s for isPrime(%i)', (num, expected) => {
      expect(MathUtils.isPrime(num)).toBe(expected);
    });
  });

  describe('calculateAsync', () => {
    test('should add numbers asynchronously', async () => {
      const result = await MathUtils.calculateAsync(5, 3, 'add');
      expect(result).toBe(8);
    });

    test('should reject for invalid operation', async () => {
      await expect(MathUtils.calculateAsync(5, 3, 'invalid')).rejects.toThrow(
        'Invalid operation'
      );
    });
  });
});

// API service testing
class APIService {
  constructor(baseURL) {
    this.baseURL = baseURL;
  }

  async fetchUser(id) {
    const response = await fetch(`${this.baseURL}/users/${id}`);
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    return response.json();
  }

  async createUser(userData) {
    const response = await fetch(`${this.baseURL}/users`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(userData),
    });

    if (!response.ok) {
      throw new Error('Failed to create user');
    }

    return response.json();
  }
}

// api.test.js
import { APIService } from './api';

// Mock fetch globally
global.fetch = jest.fn();

describe('APIService', () => {
  let apiService;

  beforeEach(() => {
    apiService = new APIService('https://api.example.com');
    fetch.mockClear();
  });

  describe('fetchUser', () => {
    test('should fetch user successfully', async () => {
      const mockUser = { id: 1, name: 'John Doe' };

      fetch.mockResolvedValueOnce({
        ok: true,
        json: jest.fn().mockResolvedValueOnce(mockUser),
      });

      const user = await apiService.fetchUser(1);

      expect(fetch).toHaveBeenCalledWith('https://api.example.com/users/1');
      expect(user).toEqual(mockUser);
    });

    test('should throw error for failed request', async () => {
      fetch.mockResolvedValueOnce({
        ok: false,
        status: 404,
        statusText: 'Not Found',
      });

      await expect(apiService.fetchUser(999)).rejects.toThrow(
        'HTTP 404: Not Found'
      );
    });
  });

  describe('createUser', () => {
    test('should create user successfully', async () => {
      const userData = { name: 'Jane Doe', email: 'jane@example.com' };
      const createdUser = { id: 2, ...userData };

      fetch.mockResolvedValueOnce({
        ok: true,
        json: jest.fn().mockResolvedValueOnce(createdUser),
      });

      const result = await apiService.createUser(userData);

      expect(fetch).toHaveBeenCalledWith('https://api.example.com/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(userData),
      });
      expect(result).toEqual(createdUser);
    });
  });
});

// Component testing with React Testing Library
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';

// Counter.jsx
function Counter({ initialValue = 0, onCountChange }) {
  const [count, setCount] = React.useState(initialValue);

  const increment = () => {
    const newCount = count + 1;
    setCount(newCount);
    onCountChange?.(newCount);
  };

  const decrement = () => {
    const newCount = count - 1;
    setCount(newCount);
    onCountChange?.(newCount);
  };

  return (
    <div>
      <span data-testid="count">{count}</span>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

// Counter.test.jsx
describe('Counter Component', () => {
  test('renders with initial value', () => {
    render(<Counter initialValue={5} />);
    expect(screen.getByTestId('count')).toHaveTextContent('5');
  });

  test('increments count when + button clicked', async () => {
    const user = userEvent.setup();
    render(<Counter />);

    const incrementButton = screen.getByText('+');
    await user.click(incrementButton);

    expect(screen.getByTestId('count')).toHaveTextContent('1');
  });

  test('calls onCountChange when count changes', async () => {
    const user = userEvent.setup();
    const mockOnCountChange = jest.fn();

    render(<Counter onCountChange={mockOnCountChange} />);

    await user.click(screen.getByText('+'));

    expect(mockOnCountChange).toHaveBeenCalledWith(1);
  });
});

Vitest Testing Framework

// vite.config.js
import { defineConfig } from 'vite';
import { configDefaults } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.js'],
    include: ['src/**/*.{test,spec}.{js,ts,jsx,tsx}'],
    exclude: [...configDefaults.exclude, 'e2e/*'],
    coverage: {
      reporter: ['text', 'html'],
      exclude: [
        'node_modules/',
        'src/test/setup.js',
      ]
    }
  }
});

// package.json
{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "test:coverage": "vitest run --coverage",
    "test:ui": "vitest --ui"
  }
}

// Vitest test examples
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';

// Mock a module
vi.mock('./api', () => ({
  fetchData: vi.fn(() => Promise.resolve({ data: 'mocked' }))
}));

describe('User Service', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('should process user data correctly', () => {
    const userData = { name: 'John', age: 30 };
    const processed = processUserData(userData);

    expect(processed).toMatchObject({
      name: 'John',
      age: 30,
      isAdult: true
    });
  });

  it('should handle async operations', async () => {
    const mockFetch = vi.fn().mockResolvedValue({
      ok: true,
      json: () => Promise.resolve({ id: 1, name: 'Test' })
    });

    global.fetch = mockFetch;

    const result = await fetchUserData(1);

    expect(mockFetch).toHaveBeenCalledWith('/api/users/1');
    expect(result).toEqual({ id: 1, name: 'Test' });
  });
});

// Snapshot testing
import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import UserCard from './UserCard';

describe('UserCard', () => {
  it('should match snapshot', () => {
    const user = { name: 'John Doe', email: 'john@example.com' };
    const { container } = render(<UserCard user={user} />);

    expect(container.firstChild).toMatchSnapshot();
  });
});

Cypress E2E Testing

// cypress.config.js
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    viewportWidth: 1280,
    viewportHeight: 720,
    supportFile: 'cypress/support/e2e.js',
    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
  },
});

// cypress/support/commands.js
Cypress.Commands.add('login', (username, password) => {
  cy.visit('/login');
  cy.get('[data-cy="username"]').type(username);
  cy.get('[data-cy="password"]').type(password);
  cy.get('[data-cy="login-button"]').click();
});

Cypress.Commands.add('logout', () => {
  cy.get('[data-cy="user-menu"]').click();
  cy.get('[data-cy="logout"]').click();
});

Cypress.Commands.add('createPost', (title, content) => {
  cy.get('[data-cy="new-post"]').click();
  cy.get('[data-cy="post-title"]').type(title);
  cy.get('[data-cy="post-content"]').type(content);
  cy.get('[data-cy="publish"]').click();
});

// cypress/e2e/auth.cy.js
describe('Authentication', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('should login with valid credentials', () => {
    cy.login('testuser', 'password123');

    cy.url().should('include', '/dashboard');
    cy.get('[data-cy="welcome-message"]').should(
      'contain',
      'Welcome, testuser'
    );
  });

  it('should show error for invalid credentials', () => {
    cy.login('invalid', 'wrong');

    cy.get('[data-cy="error-message"]')
      .should('be.visible')
      .and('contain', 'Invalid credentials');
  });

  it('should logout successfully', () => {
    cy.login('testuser', 'password123');
    cy.logout();

    cy.url().should('include', '/login');
  });
});

// cypress/e2e/blog.cy.js
describe('Blog Management', () => {
  beforeEach(() => {
    cy.login('author', 'password123');
  });

  it('should create a new blog post', () => {
    const title = 'Test Post';
    const content = 'This is test content for the blog post.';

    cy.createPost(title, content);

    cy.get('[data-cy="success-message"]').should(
      'contain',
      'Post published successfully'
    );

    cy.visit('/blog');
    cy.get('[data-cy="post-title"]').should('contain', title);
  });

  it('should edit existing post', () => {
    cy.visit('/blog');
    cy.get('[data-cy="post-item"]').first().click();
    cy.get('[data-cy="edit-post"]').click();

    cy.get('[data-cy="post-title"]').clear().type('Updated Post Title');

    cy.get('[data-cy="save"]').click();

    cy.get('[data-cy="post-title"]').should('contain', 'Updated Post Title');
  });
});

// cypress/e2e/api.cy.js
describe('API Testing', () => {
  it('should fetch users from API', () => {
    cy.request('GET', '/api/users').then((response) => {
      expect(response.status).to.eq(200);
      expect(response.body).to.have.property('users');
      expect(response.body.users).to.be.an('array');
    });
  });

  it('should create user via API', () => {
    const newUser = {
      name: 'John Doe',
      email: 'john@example.com',
      password: 'password123',
    };

    cy.request('POST', '/api/users', newUser).then((response) => {
      expect(response.status).to.eq(201);
      expect(response.body).to.have.property('id');
      expect(response.body.name).to.eq(newUser.name);
    });
  });
});

// Component testing with Cypress
import { mount } from 'cypress/react';
import TodoList from './TodoList';

describe('TodoList Component', () => {
  it('should add new todo', () => {
    mount(<TodoList />);

    cy.get('[data-cy="todo-input"]').type('Learn Cypress');
    cy.get('[data-cy="add-button"]').click();

    cy.get('[data-cy="todo-item"]')
      .should('have.length', 1)
      .and('contain', 'Learn Cypress');
  });

  it('should mark todo as complete', () => {
    const todos = [{ id: 1, text: 'Test todo', completed: false }];
    mount(<TodoList initialTodos={todos} />);

    cy.get('[data-cy="todo-checkbox"]').click();
    cy.get('[data-cy="todo-item"]').should('have.class', 'completed');
  });
});

Playwright E2E Testing

// playwright.config.js
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
  ],
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

// tests/auth.spec.js
import { test, expect } from '@playwright/test';

test.describe('Authentication', () => {
  test('should login successfully', async ({ page }) => {
    await page.goto('/login');

    await page.fill('[data-testid="username"]', 'testuser');
    await page.fill('[data-testid="password"]', 'password123');
    await page.click('[data-testid="login-button"]');

    await expect(page).toHaveURL('/dashboard');
    await expect(page.locator('[data-testid="welcome"]')).toContainText(
      'Welcome'
    );
  });

  test('should show validation errors', async ({ page }) => {
    await page.goto('/login');

    await page.click('[data-testid="login-button"]');

    await expect(page.locator('[data-testid="username-error"]')).toContainText(
      'Username is required'
    );
    await expect(page.locator('[data-testid="password-error"]')).toContainText(
      'Password is required'
    );
  });
});

// tests/shopping-cart.spec.js
import { test, expect } from '@playwright/test';

test.describe('Shopping Cart', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/products');
  });

  test('should add product to cart', async ({ page }) => {
    await page.click('[data-testid="product-1"] [data-testid="add-to-cart"]');

    await expect(page.locator('[data-testid="cart-count"]')).toContainText('1');

    await page.click('[data-testid="cart-icon"]');

    await expect(page.locator('[data-testid="cart-item"]')).toHaveCount(1);
  });

  test('should update quantity in cart', async ({ page }) => {
    await page.click('[data-testid="product-1"] [data-testid="add-to-cart"]');
    await page.click('[data-testid="cart-icon"]');

    await page.click('[data-testid="quantity-increase"]');

    await expect(page.locator('[data-testid="quantity-input"]')).toHaveValue(
      '2'
    );
    await expect(page.locator('[data-testid="cart-count"]')).toContainText('2');
  });

  test('should proceed to checkout', async ({ page }) => {
    await page.click('[data-testid="product-1"] [data-testid="add-to-cart"]');
    await page.click('[data-testid="cart-icon"]');
    await page.click('[data-testid="checkout-button"]');

    await expect(page).toHaveURL('/checkout');
    await expect(page.locator('h1')).toContainText('Checkout');
  });
});

// tests/visual.spec.js
import { test, expect } from '@playwright/test';

test.describe('Visual Tests', () => {
  test('should match homepage screenshot', async ({ page }) => {
    await page.goto('/');
    await expect(page).toHaveScreenshot('homepage.png');
  });

  test('should match mobile layout', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/');
    await expect(page).toHaveScreenshot('homepage-mobile.png');
  });
});

// tests/api.spec.js
import { test, expect } from '@playwright/test';

test.describe('API Tests', () => {
  test('should get users list', async ({ request }) => {
    const response = await request.get('/api/users');

    expect(response.status()).toBe(200);

    const users = await response.json();
    expect(users).toHaveProperty('data');
    expect(Array.isArray(users.data)).toBeTruthy();
  });

  test('should create new user', async ({ request }) => {
    const newUser = {
      name: 'Test User',
      email: 'test@example.com',
      password: 'password123',
    };

    const response = await request.post('/api/users', {
      data: newUser,
    });

    expect(response.status()).toBe(201);

    const user = await response.json();
    expect(user.name).toBe(newUser.name);
    expect(user.email).toBe(newUser.email);
  });
});

// Page Object Model
class LoginPage {
  constructor(page) {
    this.page = page;
    this.usernameInput = '[data-testid="username"]';
    this.passwordInput = '[data-testid="password"]';
    this.loginButton = '[data-testid="login-button"]';
    this.errorMessage = '[data-testid="error-message"]';
  }

  async goto() {
    await this.page.goto('/login');
  }

  async login(username, password) {
    await this.page.fill(this.usernameInput, username);
    await this.page.fill(this.passwordInput, password);
    await this.page.click(this.loginButton);
  }

  async getErrorMessage() {
    return this.page.textContent(this.errorMessage);
  }
}

// Using Page Object Model
test('should login with page object', async ({ page }) => {
  const loginPage = new LoginPage(page);

  await loginPage.goto();
  await loginPage.login('testuser', 'password123');

  await expect(page).toHaveURL('/dashboard');
});

Testing Best Practices

// Test organization and patterns
class TestUtils {
  // Factory functions for test data
  static createUser(overrides = {}) {
    return {
      id: Math.floor(Math.random() * 1000),
      name: 'Test User',
      email: 'test@example.com',
      age: 25,
      isActive: true,
      ...overrides,
    };
  }

  static createProduct(overrides = {}) {
    return {
      id: Math.floor(Math.random() * 1000),
      name: 'Test Product',
      price: 99.99,
      description: 'A great test product',
      inStock: true,
      ...overrides,
    };
  }

  // Test helpers
  static async waitFor(condition, timeout = 5000) {
    const start = Date.now();

    while (Date.now() - start < timeout) {
      if (await condition()) {
        return true;
      }
      await new Promise((resolve) => setTimeout(resolve, 100));
    }

    throw new Error('Condition not met within timeout');
  }

  static mockLocalStorage() {
    const store = {};

    return {
      getItem: jest.fn((key) => store[key] || null),
      setItem: jest.fn((key, value) => {
        store[key] = value;
      }),
      removeItem: jest.fn((key) => {
        delete store[key];
      }),
      clear: jest.fn(() => {
        Object.keys(store).forEach((key) => delete store[key]);
      }),
    };
  }

  static mockFetch(responses = {}) {
    return jest.fn((url, options) => {
      const method = options?.method || 'GET';
      const key = `${method} ${url}`;

      if (responses[key]) {
        return Promise.resolve({
          ok: true,
          status: 200,
          json: () => Promise.resolve(responses[key]),
        });
      }

      return Promise.reject(new Error(`No mock response for ${key}`));
    });
  }
}

// Custom matchers
expect.extend({
  toBeValidEmail(received) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const pass = emailRegex.test(received);

    if (pass) {
      return {
        message: () => `expected ${received} not to be a valid email`,
        pass: true,
      };
    } else {
      return {
        message: () => `expected ${received} to be a valid email`,
        pass: false,
      };
    }
  },

  toBeWithinRange(received, floor, ceiling) {
    const pass = received >= floor && received <= ceiling;

    if (pass) {
      return {
        message: () =>
          `expected ${received} not to be within range ${floor} - ${ceiling}`,
        pass: true,
      };
    } else {
      return {
        message: () =>
          `expected ${received} to be within range ${floor} - ${ceiling}`,
        pass: false,
      };
    }
  },
});

// Example test using best practices
describe('UserService', () => {
  let userService;
  let mockFetch;
  let mockLocalStorage;

  beforeEach(() => {
    mockFetch = TestUtils.mockFetch({
      'GET /api/users/1': TestUtils.createUser({ id: 1, name: 'John Doe' }),
      'POST /api/users': TestUtils.createUser({ id: 2 }),
    });

    mockLocalStorage = TestUtils.mockLocalStorage();

    global.fetch = mockFetch;
    global.localStorage = mockLocalStorage;

    userService = new UserService();
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  describe('getUser', () => {
    test('should fetch user by id', async () => {
      const user = await userService.getUser(1);

      expect(mockFetch).toHaveBeenCalledWith(
        '/api/users/1',
        expect.any(Object)
      );
      expect(user).toMatchObject({
        id: 1,
        name: 'John Doe',
      });
    });

    test('should handle fetch errors', async () => {
      mockFetch.mockRejectedValueOnce(new Error('Network error'));

      await expect(userService.getUser(1)).rejects.toThrow('Network error');
    });
  });

  describe('createUser', () => {
    test('should create user with valid data', async () => {
      const userData = TestUtils.createUser({ name: 'Jane Doe' });

      const user = await userService.createUser(userData);

      expect(user.email).toBeValidEmail();
      expect(user.age).toBeWithinRange(18, 100);
    });
  });
});

Test Coverage and Reporting

// Coverage configuration
// jest.config.js
module.exports = {
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/index.js',
    '!src/reportWebVitals.js',
    '!src/**/*.test.{js,jsx,ts,tsx}',
    '!src/**/*.stories.{js,jsx,ts,tsx}',
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
    './src/components/': {
      branches: 90,
      functions: 90,
      lines: 90,
      statements: 90,
    },
  },
  coverageReporters: ['text', 'lcov', 'html', 'json-summary'],
};

// Custom test reporter
class CustomReporter {
  constructor(globalConfig, options) {
    this._globalConfig = globalConfig;
    this._options = options;
  }

  onRunComplete(contexts, results) {
    const { numTotalTestSuites, numPassedTestSuites, numFailedTestSuites } =
      results;

    console.log('\n=== Test Summary ===');
    console.log(`Total Suites: ${numTotalTestSuites}`);
    console.log(`Passed: ${numPassedTestSuites}`);
    console.log(`Failed: ${numFailedTestSuites}`);

    if (results.coverageMap) {
      const coverage = results.coverageMap.getCoverageSummary();
      console.log('\n=== Coverage Summary ===');
      console.log(`Lines: ${coverage.lines.pct}%`);
      console.log(`Functions: ${coverage.functions.pct}%`);
      console.log(`Branches: ${coverage.branches.pct}%`);
      console.log(`Statements: ${coverage.statements.pct}%`);
    }
  }
}

module.exports = CustomReporter;

// Performance testing
describe('Performance Tests', () => {
  test('should render component within performance budget', async () => {
    const startTime = performance.now();

    render(<ComplexComponent data={largeDataSet} />);

    const endTime = performance.now();
    const renderTime = endTime - startTime;

    expect(renderTime).toBeLessThan(100); // 100ms budget
  });

  test('should handle large data sets efficiently', () => {
    const largeArray = Array.from({ length: 10000 }, (_, i) => i);

    const startTime = performance.now();
    const result = processLargeData(largeArray);
    const endTime = performance.now();

    expect(endTime - startTime).toBeLessThan(50); // 50ms budget
    expect(result).toHaveLength(10000);
  });
});

Conclusion

JavaScript testing is essential for building reliable applications. By using appropriate testing frameworks like Jest, Vitest, Cypress, and Playwright, implementing proper testing strategies, and following best practices, you can create comprehensive test suites that catch bugs early and ensure your applications work correctly. Remember to test at different levels (unit, integration, e2e), maintain good test coverage, and keep your tests maintainable and focused.