How toEnable Remix ~/ aliased imports in Vitest

If you're using Remix you're most likely using the ~/ alias when importing files, if you want to use Vitest to test your code, this can be solved by using the vite-tsconfig-paths plugin for Vite/Vitest.

In your vitest.config.ts import the plugin and add it to the list of plugins like this:

/// <reference types="vitest" /> /// <reference types="vite/client" /> import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; export default defineConfig({ plugins: [react(), tsconfigPaths()], });

Now Vitest will be able to resolve the paths with ~/ in your tested files and your test itself.