How to mock optional import in vitest

[jkmcclinton]

Hello,

I have a constants.js file that imports a configuration .js file for local use only. This file is not available when running unit tests on a server or in the production build. However, Vitest seems to fail when the import is run and expects the file to be there. How do I get around this?

Here is what I have currently tried:

./src/static/constants.js

...

let local;
let configModule;

if (!IS_PROD) {
  try {
    configModule = await import("./local_config.js");
    local.config = configModule.default;
    configModule = await import("./local_settings.js");
    local.settings= configModule.default;
  } catch (error) {
    console.warn(error);
  }
}

./setup.js

import { vi, beforeAll } from 'vitest';

beforeAll(() => {
  vi.mock("./src/static/local_config.js", () => undefined);
});

./vitest.config.js

import { defineConfig } from "vite";

export default defineConfig({
  esbuild: {
    supported: {
      "top-level-await": true
    },
  },
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: [ "./setup.js" ],
  },
});

[sheremet-va]

You need to specify a fallback in the config because the error is controlled by Vite, not Vitest:

https://vitest.dev/guide/mocking.html#virtual-modules

You need to tell Vite that module exists otherwise it will fail during parsing

[jkmcclinton]

Hm, it seems odd to me that extra configuration outside of the application code is required to not fail on optional imports. We recently moved our CRA project to Vite, which is when this error appeared. Is this perhaps a side effect of having to use import instead of require?

[sheremet-va]

Every import is analysed by the compiler. If it can’t be resolved, Vite throws an error. The configuration is part of the application code, so I don’t see anything odd here.

[jkmcclinton]

What I mean is, it is naturally unfriendly toward optional imports. This is outside the scope of vitest, but it seems like an odd choice given that native JavaScript would handle this just fine.

I'll try your suggestion above though to see if that works.

[sheremet-va]

Bundlers bundle JS code so they need to know every file during the compilation. Vitest uses Vite under the hood which is a bundler.