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:

vitest.config.ts
/// <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.