Enhancing Code Quality: Testing in My TypeScript SSG App

Developing a robust, error-free open-source project is a goal every developer wishes to achieve. One of the best ways to ensure the reliability and correctness of your codebase is through testing. As I added testing to my TypeScript Static Site Generator (SSG) app, I encountered challenges, made exciting discoveries, and solidified my belief in the power of testing.

Choosing the Right Tools: Introducing Vitest

Selecting the appropriate testing framework is very important. After working with Jest for JavaScript and JUnit for Java in the past, I opted for Vitest for my TypeScript SSG app TILvert. Vitest is a fast, modern, and efficient testing framework for JavaScript and TypeScript projects. It offers a clean and simple syntax, making it easy to write and understand test cases and since it uses the same syntax as Jest, I felt right at home.

Setting Up Vitest in My Project: A Step-by-Step Guide

Implementing testing in your project might seem daunting, but with the right guidance, it becomes manageable. Here's a detailed guide on how I set up Vitest in TILvert:

Installation:

npm install --save-dev vitest

Configuration:

Although Vitest comes with sane defaults for small projects, you may wish to add some configuration to modify your testing behavior.

Create a vitest.config.js file in your project directory to configure Vitest. Define your test files and other necessary configurations.

Example configuration:

export default {
  files: ['src/**/*.test.ts'],
  // Other configuration options...
};

Writing Test Cases:

Write test cases using Vitest's simple syntax. Ensure thorough coverage of your codebase, testing different functionalities and edge cases.

import { describe, expect, test } from "vitest";
import { sum } from "./my-math.ts";

describe("Test Math Logic", () => {
  test("Test Sum", () => {
    expect(sum(1, 2, 3).toBe(6);
  });
});

Running Tests:

Execute tests using the following command:

npx vitest

Alternatively, if you have Vitest installed locally you may run the vitest command, or if it is included in package.json and installed, you can add a runner in the package.json file.

"scripts": {
    "test": "vitest --run",
    "test:watch": "vitest --watch"
}

Lessons Learned and Aha Moments

While writing test cases for TILvert, I had several "aha!" moments. I realized that some of my logic was generating incorrect HTML tags in specific scenarios. This discovery not only improved my understanding of the code but also enhanced the overall user experience. Additionally, I encountered minor bugs that had gone unnoticed during the development phase. These bugs, once surfaced by the tests, were promptly fixed, ensuring a smoother user experience.

Key Takeaways

As for the future, I am convinced that testing will be a fundamental part of my projects. The assurance it provides in terms of code quality and reliability is unparalleled. I will continue exploring new testing frameworks and tools, ensuring that my open-source projects are of the highest quality and provide an exceptional user experience.

Integrating testing into TILvert was a challenging yet rewarding experience. It not only improved the app's reliability but also deepened my understanding of the codebase. I encourage fellow developers to embrace testing in their projects, as it is a vital step toward creating robust and dependable software solutions.