ViTest and TypeScript Paths | Christopher Vachon

ViTest and TypeScript Paths

2024-04-15

While setting up a new project with ViTest and TypeScript, I wanted to use paths defined in the tsconfig.json file instead of having to duplicate the list in the vitest.config.ts file. Being unable to quickly find a way to do this, I decided to try to import the paths directly from the tsconfig.json file and modify those values to the one expected by ViTest.

Here is how I set up TypeScript paths in a ViTest project.

// tsconfig.json
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "~lib/*": ["src/lib/*"],
            "~assets/*": ["src/assets/*"],
            "~ui/*": ["src/ui/*"]
        },
        "types": ["vitest/globals"]
    }
}
// vitest.config.ts
import { defineConfig } from "vitest/config";
import tsconfig from "./tsconfig.json";
import path from "path";

// Create an alias object from the paths in tsconfig.json
const alias = Object.fromEntries(
    // For Each Path in tsconfig.json
    Object.entries(tsconfig.compilerOptions.paths).map(([key, [value]]) => [
        // Remove the "/*" from the key and resolve the path
        key.replace("/*", ""),
        // Remove the "/*" from the value Resolve the relative path
        path.resolve(__dirname, value.replace("/*", ""))
    ])
);

export default defineConfig({
    resolve: {
        alias
    }
});