Testing TypeScript Applications

Chapter Outline

Testing TypeScript Applications: Tools and Techniques

Testing is a critical component of modern software development, providing assurance that your application behaves as expected and meets its requirements. With TypeScript, testing involves not just runtime behavior but also ensuring type correctness and application logic. This article discusses various types of tests applicable to TypeScript applications, tools that facilitate these tests, and best practices to keep in mind.

Types of Tests in TypeScript Applications

1. Unit Testing

Unit tests verify the smallest testable parts of an application in isolation (e.g., functions, methods, or classes). These tests are crucial for ensuring that each component behaves correctly under various conditions.

Tools:

  • Jest: Popular for its zero-configuration and powerful mocking capabilities.
  • Mocha/Chai: Provides flexibility in configuration and assertion styles.

Install test frameworks

Jest:

npm install --save-dev jest

Update package.json:

"scripts": {
   "test": "jest",
}

Mocha/Chai:

npm install --save-dev mocha chai

Update package.json:

"scripts": {
   "test": "mocha",
}

Example: Testing a TypeScript function with Jest

// sum.ts
export const sum = (a: number, b: number): number => a + b;

// sum.test.ts
import { sum } from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Best Practices:

  • Test both success and failure scenarios.
  • Ensure functions with side effects are tested with appropriate mocks.
  • Aim for high code coverage to ensure most logical paths are tested.

2. Integration Testing

Integration tests verify that different modules or services work together as expected. These tests are crucial for catching issues that unit tests can’t, such as the interaction between components or with databases.

Tools:

  • Jest: Can be configured to run tests on integrated pieces of the application.
  • Mocha/Chai: Works well when used alongside tools like Supertest for API integration testing.

Example: Testing an API with Supertest and Jest

// server.ts
import express from 'express';
const app = express();

app.get('/user', (req, res) => {
    res.status(200).json({ name: 'John Doe' });
});

export default app;

// server.test.ts
import request from 'supertest';
import app from './server';

describe('GET /user', () => {
    it('responds with a json containing user data', async () => {
        const response = await request(app).get('/user');
        expect(response.status).toBe(200);
        expect(response.type).toMatch(/json/);
        expect(response.body).toEqual({ name: 'John Doe' });
    });
});

Best Practices:

  • Focus on the interaction points between modules.
  • Use realistic data and scenarios to simulate real-world usage.

3. End-to-End (E2E) Testing

End-to-end (E2E) testing is crucial for verifying that complex user flows work as expected in an environment that mimics production. These tests interact with the application just like a real user would — from clicking buttons and entering text, to checking for specific outputs. For TypeScript applications, two of the most powerful tools for conducting E2E tests are Cypress and Selenium. Both provide comprehensive testing capabilities but differ in their approach and execution.

Cypress

Cypress is a modern web automation test framework designed to simplify the process of setting up, writing, running, and debugging tests. It is built on a new architecture and runs in the same run-loop as the application, providing native access to every object without the need for remote commands.

Advantages:

  • Ease of Setup: Cypress is easier to set up and requires less configuration compared to traditional testing tools.
  • Real-time Reloads: Cypress automatically reloads whenever test files are changed.
  • Debuggability: It provides excellent debugging capabilities through readable errors and stack traces. It also allows you to directly inspect the application from the state it was in at the time a test failed.

Example: Testing a Login Form

describe('Login Form', () => {
  it('successfully logs in', () => {
    cy.visit('/login'); // Adjust URL to your application’s login page
    cy.get('input[name=username]').type('testuser');
    cy.get('input[name=password]').type('password123');
    cy.get('form').submit();
    cy.url().should('include', '/dashboard'); // Adjust to the expected URL after login
  });
});

Selenium

Selenium is one of the most established tools for automating browsers. It supports multiple browsers and programming languages, making it highly versatile for E2E testing across different platforms.

Advantages:

  • Multi-language Support: It supports various programming languages including JavaScript (via WebDriver bindings), Python, Java, and more.
  • Cross-browser Testing: Selenium can automate browsers on virtually all popular platforms, ensuring comprehensive cross-browser testing.

Example: Testing a Login Form with Selenium WebDriver

import { Builder, By, until } from 'selenium-webdriver';

(async function example() {
  let driver = await new Builder().forBrowser('firefox').build();
  try {
    await driver.get('http://localhost:8000/login'); // Adjust URL to your application’s login page
    await driver.findElement(By.name('username')).sendKeys('testuser');
    await driver.findElement(By.name('password')).sendKeys('password123');
    await driver.findElement(By.css('form')).submit();
    await driver.wait(until.urlContains('dashboard'), 10000); // Adjust to the expected URL after login
  } finally {
    await driver.quit();
  }
})();

Integration with CI/CD

Integrating E2E tests into your CI/CD pipeline ensures tests are automatically run against every change, helping catch regressions early. Both Cypress and Selenium can be integrated into CI systems like Jenkins, Travis CI, or GitHub Actions.

For instance, here is how you might configure a GitHub Actions workflow to run Cypress tests:

name: E2E Tests
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Install Dependencies
        run: npm install
      - name: Run Cypress Tests
        uses: cypress-io/github-action@v2
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

4. Performance Testing

Performance testing is essential for ensuring that your TypeScript applications are not only functional but also efficient and capable of handling expected load and stress. This kind of testing typically involves evaluating the speed, scalability, and responsiveness of your application under a given workload. For TypeScript applications, Jest and Artillery are two powerful tools that can be used to conduct performance tests.

Jest for Performance Testing

Although Jest is predominantly known as a unit testing framework, it can also be effectively used for performance testing by measuring how long tasks take to complete. Jest provides the performance.now() function which can be used to track the execution time of your functions.

Example: Testing Function Execution Time

describe('Performance Testing', () => {
    test('function should execute under 1000 milliseconds', () => {
        const start = performance.now();

        // functionToTest is the function you want to test
        functionToTest();  

        const end = performance.now();
        const executionTime = end - start;

        console.log(`Execution time: ${executionTime} ms`);
        expect(executionTime).toBeLessThan(1000);
    });
});

In this example, we measure the time it takes for functionToTest to execute and assert that it should be less than 1000 milliseconds. This is a simple way to ensure that certain critical functions in your application perform within acceptable time limits.

Artillery for Load Testing

Artillery is a powerful, modern load testing and smoke-testing tool that can test the performance of your web apps, microservices, and APIs. It is capable of generating a large amount of traffic to a server and measuring how it performs under stress.

Example: Load Testing an API Endpoint

# Save this configuration to a file named artillery.yml
config:
  target: 'http://localhost:3000'  # URL of your application
  phases:
    - duration: 60  # test duration in seconds
      arrivalRate: 20  # number of new virtual users arriving every second

scenarios:
  - flow:
      - get:
          url: "/api/data"  # API endpoint to test

To run the test, execute the following command:

artillery run artillery.yml

This Artillery script tests how the /api/data endpoint of your application performs under the load of 20 new users every second for 60 seconds. Artillery provides detailed reports that help you understand response times, throughput, error rates, and more.

Integration with CI/CD

Both Jest and Artillery can be integrated into CI/CD pipelines to ensure performance standards are met automatically with each deployment.

Example: GitHub Actions Configuration for Running Artillery Tests

name: Load Test
on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - name: Install dependencies
      run: npm install
    - name: Run Artillery Tests
      run: npm run test:load  # Assumes you have a script in package.json named "test:load" that runs Artillery

General Best Practices

  • Code Coverage: Tools like Istanbul (natively supported in Jest) can measure the percentage of code exercised by tests, aiming for a high coverage percentage without being obsessive.
  • Testing Edge Cases: Always include tests for edge cases in your scenarios, especially for public-facing interfaces where inputs can be unpredictable.
  • Continuous Integration (CI): Implement a CI pipeline to run tests automatically on every commit, ensuring issues are caught early.
  • Mocking and Stubbing: Use mocking frameworks like Sinon or Jest’s built-in mocking capabilities to isolate units of work during testing.
  • Readable Tests: Write tests that are easy to read and understand. They act as live documentation for your application.
  • Regular Refactoring: As your application evolves, so should your tests. Refactor tests to reduce complexity and improve maintainability.

Conclusion

Testing in TypeScript is an essential practice that spans several types and layers, from static type checks to end-to-end user flow simulations. By leveraging the correct tools and following best practices, developers can ensure their applications are robust, performant, and maintainable. Effective testing strategies lead to higher quality software and more predictable development cycles, ultimately resulting in successful, reliable applications. For further exploration, refer to detailed documentation provided by tools like Jest, Cypress, and TypeScript.

Copyright © 2023 - 2025 by Walid Newaz