Writing Unit Tests with Vitest

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.


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:unit

Writing 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());

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]
runs-on: ubuntu-latest
- name: Checkout code
uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
node-version: 16
- name: Install dependencies
run: pnpm install
- name: Run tests
run: pnpm test

Most 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.