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.
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: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());
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 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.