Writing Unit Tests with Vitest
Learn how to write unit tests using Vitest, a lightweight and fast testing framework
All versions of Nextbase Starter Kit come with Vitest installed. Vitest is a lightweight and fast testing framework that allows you to write unit tests for your application.
Configuration
Vitest is configured in the vitest.config.ts file.
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
test: {
environment: "jsdom",
},
// path alias
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});As you can see, the configuration file is quite simple. You can customize it according to your needs.
Running tests
Vitest runs in NODE_ENV=test mode. It also relies on .env.test for environment variables.
Running Vitest
pnpm test:unitWriting tests
All the test cases are written in the tests folder.
Helper Function Test case example
This is an example of a test case for a helper function.
import { expect, test } from "vitest";
import { toDateTime } from "./helpers";
test("helpers: toDateTime should return a date object", () => {
const date = new Date();
const dateObject = toDateTime(date.getTime());
expect(dateObject).toBeInstanceOf(Date);
});Using Vitest with GitHub Actions
You can easily integrate Vitest with GitHub Actions to run your tests automatically on every push or pull request. Here is a basic example of a GitHub Actions workflow:
name: Test
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: 16
- name: Install dependencies
run: pnpm install
- name: Run tests
run: pnpm testMost SaaS solo developers or small teams write integration tests more, hence we only added Vitest setup and a dummy test case, but you can update the test suite as needed.