Vitest for TypeScript

Vitest is a fast and modern testing framework that integrates seamlessly with Vite-based projects. It offers excellent TypeScript support, making it a great choice for developers looking to leverage cutting-edge tools in their workflow. This guide will walk you through configuring Vitest for your TypeScript project.

---

Prerequisites

Before configuring Vitest, ensure you have the following:

1. Vite Installed: If your project is not already using Vite, set it up by running:

   npm create vite@latest my-project
   cd my-project
   npm install

2. TypeScript: Ensure your project is set up for TypeScript:

   npm install typescript --save-dev
   npx tsc --init

3. Vitest: Install Vitest and its TypeScript-related dependencies:

   npm install vitest ts-node --save-dev

4. Node.js: Ensure you have Node.js installed. Download the latest version from Node.js.

---

Configuration Steps

1. Update vite.config.ts

   Vitest integrates with Vite through its configuration file. Open or create vite.config.ts and add the following configuration:

   import { defineConfig } from 'vite';
   import { resolve } from 'path';
   import { configDefaults } from 'vitest/config';
   
   export default defineConfig({
     resolve: {
       alias: {
         '@': resolve(__dirname, './src'),
       },
     },
    test: {
      globals: true,
       environment: 'node',
       exclude: [...configDefaults.exclude, '**/dist/**'],
       coverage: {
         provider: 'istanbul',
         reporter: ['text', 'html'],
      },
    },
   });

---

2. Verify TypeScript Configuration

   Ensure your tsconfig.json includes options compatible with Vitest. Here’s an example:

   {
      "compilerOptions": {
        "target": "ES2020",
        "module": "ESNext",
        "moduleResolution": "Node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "jsx": "react-jsx",
        "outDir": "./dist",
        "rootDir": "./src"
      },
      "include": ["src/**/*.ts"],
      "exclude": ["node_modules", "**/*.test.ts"]
   }

---

3. Add Test Scripts

   Update your package.json to include test scripts:

   "scripts": {
     "test": "vitest",
     "test:watch": "vitest --watch",
   }

---

4. Write a Test

   Create a test file in your project, for example, src/sample.test.ts:

   function sum(a: number, b: number): number {
     return a + b;
   }
   
   test('adds 1 + 2 to equal 3', () => {
     expect(sum(1, 2)).toBe(3);
   });

---

5. Run Tests

   Run your tests using the following script:

   npm test

---

With this setup, your TypeScript project is ready to leverage Vitest for robust and efficient unit testing. Happy testing!