Introduction to Unit Testing

What is Unit Testing?

Unit testing is a way to check if small parts of your code work correctly.

Imagine you’re building a big puzzle. Unit testing is like making sure each puzzle piece is the right shape before you try to put the whole puzzle together.

In programming, a “unit” is usually a single function or a small piece of code that does one specific job. When we write unit tests, we:

Run the code
Check if it gives us the result we expect

For example, if you have a function that adds two numbers, a unit test would check if add(2, 3) correctly returns 5.

Why is Unit Testing Important?

Unit testing helps us in many ways:

Finds bugs early: We can catch mistakes in our code before they cause bigger problems.
Makes changes easier: When we want to improve our code, tests help us make sure we didn’t break anything.
Improves code quality: Writing tests often leads to better, cleaner code.
Serves as documentation: Tests show how our code should work, which helps other developers understand it.
Saves time: While writing tests takes time at first, it saves a lot of time finding and fixing bugs later.

Introduction to Vitest

Vitest is a tool that helps us write and run unit tests. It’s made to work well with Vite, a popular tool for building web applications, but it can also be used in other JavaScript projects.

Vitest is:

Fast: It runs tests quickly, which is great when you have many tests.
Easy to use: It has a simple way of writing tests that’s easy to learn.
Feature-rich: It includes many helpful features for different testing needs.

Vitest vs Jest

Let’s compare Vitest to another popular testing tool called Jest.

What is Jest?

Jest is a well-known testing tool created by Facebook in 2011. Many developers have been using Jest for years to test their JavaScript code, especially in React projects.

How are Vitest and Jest similar?

Purpose: Both Vitest and Jest are used for testing JavaScript code.
Syntax: They use very similar ways of writing tests. If you know how to write Jest tests, you’ll find Vitest familiar.
Features: Both offer features such as:
- Mocking: This lets you replace parts of your code with fake versions for testing.
- Code coverage: This shows you how much of your code is being tested.
- Ability to run specific tests: You can choose to run only certain tests instead of all of them.

How are they different?

Speed: Vitest is usually faster, especially for big projects.
Configuration: Vitest often needs less setup, especially in Vite projects.
ESM Support: Vitest works better with ECMAScript Modules (ESM), which is the modern way of organizing JavaScript code.

ESM is a way to organize and share code between different JavaScript files usingimport and export statements.

Vitest supports this modern syntax out of the box. This means you can write your tests using import statements without any extra setup:
javascript
```
	// math.test.js
	import { expect, test } from "vitest";
	import { add } from "./math.js";
	
	test("adds 2 + 3 to equal 5", () => {
	  expect(add(2, 3)).toBe(5);
	});
```
With Vitest, you can use ESM in your tests just like you do in your regular code. This makes it easier to test modern JavaScript projects without any extra steps or configuration.

Can Jest tests be used with Vitest?

Yes, in most cases. Vitest was designed to be compatible with Jest. This means:

You can often run your Jest tests with Vitest without changing them.
If you’re moving from Jest to Vitest, you usually don’t need to rewrite all your tests.

However, some advanced Jest features might need small changes to work with Vitest.

Which one should you choose?

If you’re starting a new project, especially with Vite, Vitest is a great choice.
If you’re working on an existing project that uses Jest, it’s usually fine to stick with Jest.
If you want faster tests and easier configuration, consider switching to Vitest.

Remember, both Jest and Vitest are good tools. The best choice depends on your project’s needs.

Setting up Vitest

Start a new npm project if you don’t have a package.json file:
bash
```
	npm init -y
```
Install Vitest:
bash
```
	npm install -D vitest
```
Add a test script to package.json:
json
```
	"scripts": {
	  "test": "vitest"
	}
```

Writing Your First Test

Let’s write a simple test for a function that adds two numbers:

Create a file called math.js:

javascript

	export function add(a, b) {
	  return a + b;
	}

Create a test file called math.test.js:

javascript

	import { expect, test } from "vitest";
	import { add } from "./math.js";
	
	test("adds 1 + 2 to equal 3", () => {
	  expect(add(1, 2)).toBe(3);
	});

Run the test:
bash
```
	npm test
```

If everything is set up correctly, you should see a message saying the test passed.

Where to Put Your Test Files

There are two common ways to organize your test files in a project. Let’s look at both approaches:

1. Tests Next to Source Files

txt

	src/
	  └── js/
	      ├── utils/
	      │   ├── validation.js
	      │   └── validation.test.js
	      ├── auth/
	      │   ├── login.js
	      │   └── login.test.js
	      └── components/
	          ├── header.js
	          └── header.test.js

In this approach:

Test files sit right next to the files they test
Test files use the same name as the source file plus .test.js
Easy to find tests related to specific code

2. Separate Test Directory

txt

	src/
	   ├── js/
	   │ ├── utils/
	   │ │ └── validation.js
	   │ ├── auth/
	   │ │ └── login.js
	   │ └── components/
	   │ └── header.js
	   └── tests/
	   ├── utils/
	   │ └── validation.test.js
	   ├── auth/
	   │ └── login.test.js
	   └── components/
	   └── header.test.js

In this approach:

All tests live in a separate tests directory
The tests folder mirrors your source code structure
Keeps source code and tests separate

File Naming

For both approaches, follow these naming rules:

Add .test.js to the end of your test files and match the source file name:

If source file is validation.js
Test file should be validation.test.js

What We Learned

In this lesson, we:

Understood what unit testing is and why it’s important
Learned about Vitest and how it compares to Jest
Set up Vitest in both Vite and regular JavaScript projects
Wrote our first test
Learned two ways to organise test files in our projects

Remember:

Unit testing is like checking each puzzle piece before building the whole puzzle
Vitest is a fast and easy-to-use testing tool that works well with modern JavaScript
You can put test files either next to your code files or in a separate test folder
Test files should end with .test.js
Running tests is as simple as typing npm test in the terminal