Vitest Example

Understanding TDD (Test Driven Development)

Test Driven Development (TDD), or Test-Driven Development, is a software development practice that focuses on creating unit test cases before developing the actual code. It is an iterative approach that combines programming, unit test creation, and refactoring.
Refactoring Code: Refactoring is a programming technique that involves restructuring a part of the existing code without changing its external behavior. Its main goal is to improve code readability, reduce complexity, and make it easier to maintain and expand.

First, we need to create the test file with the extension .test.js.
Run the terminal command npm run test to start the tests. It should display a red message in the terminal saying: Error: No test suite found in file.
To solve our first error, we need to create a test.

import { describe } from "vitest";

describe("fizzbuzz", () => {});

The error has now changed and says Error: No test found in suite components/fizzbuzz.test.js. We have to start testing the use cases. First, let’s check that fizzbuzz is a function.

import { describe } from "vitest";

const fizzbuzz = () => {};

describe("fizzbuzz", () => {
  it("should be a function", () => {
    expect(typeof fizzbuzz).toBe("function");
  });
});

This returns the following error ReferenceError: it is not defined, Vitest will inform us of the errors we have, in this case it says that it is not defined. To solve this issue, we need to import it along with expect.

import { describe, it, expect } from "vitest";

After importing, save and you should see a green message.

Let’s test another use case, which is to provide a number as a parameter.

it("should throw if not number is provided as parameter", () => {
  expect(() => fizzbuzz()).toThrow();
});

Save again and you will get the following error: AssertionError: expected [Function] to throw an error. To solve this, we need to modify our fizzbuzz function to throw an error when no number is provided.

// add the parameter
const fizzbuzz = (number) => {
  // check that it is of type number
  if (typeof number !== "number") throw new Error("");
};

Now the tests pass, but let’s be more professional and return a message in the error, for this we first write the test

// This way we get the error AssertionError: expected [Function] to throw error including 'parameter provided must be a number' but got ''
const fizzbuzz = (number) => {
  if (typeof number !== "number") throw new Error();
};

// De esta forma, los test pasan correctamente
const fizzbuzz = (number) => {
  if (typeof number !== "number")
    throw new Error("parameter provided must be a number");
};

it("should throw a specific error message if not a number is provided as parameter", () => {
  expect(() => fizzbuzz()).toThrow("parameter provided must be a number");
});

Let’s try another use case, which will provide a NaN.

it("should throw a specific error message if not a number is provided", () => {
  expect(() => fizzbuzz(NaN)).toThrow("parameter provided must be a number");
});

We got the following error AssertionError: expected [Function] to throw an error, to solve it…

if (Number.isNaN(number))
  throw new Error("parameter provided must be a number");

The tests now pass correctly.

These are simple examples, below is a link to a video with the full example.

Official documentation

Official documentation: Vitest
Video from which the information was taken: Video