How to mock virtual:react-router/server-build

[brendanfmartin]

I'm working with RR7 and using a virtual module. I have read https://vitest.dev/guide/mocking#virtual-modules in the docs however the example there is with vitest.config.js. I am using a vite.config.test.ts.

I'm running in to a few issues. The resolve referenced in the doc does not show where its imported from. Is it node:dns, node:url, or node:path? node:path is the only one that matches the signature but the test is still failing with Error: Failed to resolve import "virtual:react-router/server-build" from "server/controllers/remix-controller.ts". Does the file exist?

My project is based off https://github.com/remix-run/react-router-templates/tree/main/node-custom-server. You can see the import here https://github.com/remix-run/react-router-templates/blob/main/node-custom-server/server/app.ts#L16.

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import { resolve } from 'node:path';


export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./setupTests.ts'],
    include: ['**/*.spec.{js,jsx,ts,tsx}'],
    exclude:  ["node_modules", "dist", ".idea", ".git", ".cache"],
    coverage: {
      provider: 'v8',
      reporter: ['clover', 'json', 'lcov', 'text', 'text-summary'],
    alias: {
      // 'virtual:react-router/server-build': path.resolve(__dirname, '/tests/__mocks__/react-router-server-build.js'),
      'virtual:react-router/server-build': resolve('./tests/__mocks__/react-router-server-build.js'),
    },
  }
});

[hi-ogawa]

import { resolve } from "node:path" should be correct. Here is an example https://stackblitz.com/edit/vitest-dev-vitest-w8nrf7qg?file=vite.config.ts

If this is not working for your setup, can you provide a reproduction?

[brendanfmartin]

This is great, thank you.

Your example properly nests the alias in a resolve object.

export default defineConfig({
  resolve: {
    alias: {
      'virtual:react-router/server-build': resolve('./mock.js'),
    },
  },
});

The virtual modules section of the testing does not show this https://vitest.dev/guide/mocking#virtual-modules

[hi-ogawa]

Hmm, good point, I didn't really notice 😮 This could be a bug then. Will follow up later.

[hi-ogawa]

Oh well, test.alias is also working too. Probably there's something specific about react router setup if this is not working.
https://stackblitz.com/edit/vitest-dev-vitest-gns6kamg?file=vite.config.ts

[brendanfmartin]

Oh sorry, to be clear it does work for me! Thank you!