Getting Started With Unit Testing In JS/TS And React

Wednesday, October 25, 2023 - 4 min read

Unit testing is a software development process in which the smallest testable parts of an application, called units, are individually and independently tested. The goal is to verify that each unit of code meets its design and behaves as expected. In simpler terms unit testing is isolating the smallest sets of code and testing them to verify that they behave as expected.

What do you need to get started?

a testing framework like Vitest or Jest (personally I prefer Vitest).
a project to test. I provided a repo to get started with here ( start with main and compare your branch at every step with the "steps" branch) but you can start with any project

Why Vitest, not Jest?

It's significantly faster than Jest.
Out-of-box ESM, TypeScript, and JSX support powered by esbuild.
In watch mode, it's smart and only reruns the related changes, just like HMR for tests!
If you know Jest you already know Vitest, it provides a Jest-compatible API that allows you to use it as a drop-in replacement in most projects. you only have to change a few things, and you're good to go. check the migration guide here

Installing Vitest in your project

Configuring Vitest

Make a file in the root of the project called `vitest.config.js` | `vitest.config.ts` with the following code

Add the following script to your `package.json`


"test": "vitest run",
json

Writing our first test

let's start with something simple create a file called tests/add.js | tests/add.ts with the following code

to test a unit is to check whether it matches something
eg: you expect 1 + 2 = 3. this is human language
in TS/JS you write expect(1+2).toEqual(3)
there are a lot of matchers for different types
eg: expect(function).toHaveBeenCalled()
eg: expect(object).toHaveProperty(property)
eg: expect(array).toContain(element)
eg: expect(boolean).not.toBe(false)

to create a test file you must use the extension .spec.(ts/tsx/js/jsx) or .test.(ts/tsx/js/jsx) A spec comes from "specification" where you specify how code should behave, the extension doesn't change anything in how we write the tests it's just a preference. so create a file in the same folder you created the add file called add.test.js | add.test.ts with the following code


import { add } from "./add";
import { expect, test } from "vitest";
 
test("add()", () => {
  expect(add(1, 2)).toBe(3);
});
ts

then fire up the terminal and run yarn test your terminal should look like this

congratulations! you just ran your first test successfully.

All Blogs