fix: resolve assets imported with require (#6159)

Author: sheremet-va

docs/guide/environment.md

@@ -13,6 +13,12 @@ By default, you can use these environments:
 - `happy-dom` emulates browser environment by providing Browser API, and considered to be faster than jsdom, but lacks some API, uses [`happy-dom`](https://github.com/capricorn86/happy-dom) package
 - `edge-runtime` emulates Vercel's [edge-runtime](https://edge-runtime.vercel.app/), uses [`@edge-runtime/vm`](https://www.npmjs.com/package/@edge-runtime/vm) package
 
+::: info
+When using `jsdom` or `happy-dom` environments, Vitest follows the same rules that Vite does when importing [CSS](https://vitejs.dev/guide/features.html#css) and [assets](https://vitejs.dev/guide/features.html#static-assets). If importing external dependency fails with `unknown extension .css` error, you need to inline the whole import chain manually by adding all packages to [`server.deps.external`](/config/#server-deps-external). For example, if the error happens in `package-3` in this import chain: `source code -> package-1 -> package-2 -> package-3`, you need to add all three packages to `server.deps.external`.
+
+Since Vitest 2.0.4 the `require` of CSS and assets inside the external dependencies are resolved automatically.
+:::
+
 ## Environments for Specific Files
 
 When setting `environment` option in your config, it will apply to all the test files in your project. To have more fine-grained control, you can use control comments to specify environment for specific files. Control comments are comments that start with `@vitest-environment` and are followed by the environment name:

packages/vitest/src/runtime/runVmTests.ts

@@ -4,6 +4,7 @@ import timers from 'node:timers'
 import { performance } from 'node:perf_hooks'
 import { collectTests, startTests } from '@vitest/runner'
 import { installSourcemapsSupport } from 'vite-node/source-map'
+import { KNOWN_ASSET_TYPES } from 'vite-node/constants'
 import { setupChaiConfig } from '../integrations/chai/config'
 import {
   startCoverageInsideWorker,
@@ -36,10 +37,14 @@ export async function run(
   if (workerState.environment.transformMode === 'web') {
     const _require = createRequire(import.meta.url)
     // always mock "required" `css` files, because we cannot process them
-    _require.extensions['.css'] = () => ({})
-    _require.extensions['.scss'] = () => ({})
-    _require.extensions['.sass'] = () => ({})
-    _require.extensions['.less'] = () => ({})
+    _require.extensions['.css'] = resolveCss
+    _require.extensions['.scss'] = resolveCss
+    _require.extensions['.sass'] = resolveCss
+    _require.extensions['.less'] = resolveCss
+    // since we are using Vite, we can assume how these will be resolved
+    KNOWN_ASSET_TYPES.forEach((type) => {
+      _require.extensions[`.${type}`] = resolveAsset
+    })
   }
 
   // @ts-expect-error not typed global for patched timers
@@ -93,3 +98,11 @@ export async function run(
 
   await stopCoverageInsideWorker(config.coverage, executor)
 }
+
+function resolveCss(mod: NodeJS.Module) {
+  mod.exports = ''
+}
+
+function resolveAsset(mod: NodeJS.Module, url: string) {
+  mod.exports = url
+}

packages/vitest/src/runtime/setup-node.ts

@@ -2,6 +2,7 @@ import { createRequire } from 'node:module'
 import util from 'node:util'
 import timers from 'node:timers'
 import { installSourcemapsSupport } from 'vite-node/source-map'
+import { KNOWN_ASSET_TYPES } from 'vite-node/constants'
 import type {
   EnvironmentOptions,
   ResolvedConfig,
@@ -44,10 +45,14 @@ export async function setupGlobalEnv(
   if (environment.transformMode === 'web') {
     const _require = createRequire(import.meta.url)
     // always mock "required" `css` files, because we cannot process them
-    _require.extensions['.css'] = () => ({})
-    _require.extensions['.scss'] = () => ({})
-    _require.extensions['.sass'] = () => ({})
-    _require.extensions['.less'] = () => ({})
+    _require.extensions['.css'] = resolveCss
+    _require.extensions['.scss'] = resolveCss
+    _require.extensions['.sass'] = resolveCss
+    _require.extensions['.less'] = resolveCss
+    // since we are using Vite, we can assume how these will be resolved
+    KNOWN_ASSET_TYPES.forEach((type) => {
+      _require.extensions[`.${type}`] = resolveAsset
+    })
     process.env.SSR = ''
   }
   else {
@@ -69,6 +74,14 @@ export async function setupGlobalEnv(
   }
 }
 
+function resolveCss(mod: NodeJS.Module) {
+  mod.exports = ''
+}
+
+function resolveAsset(mod: NodeJS.Module, url: string) {
+  mod.exports = url
+}
+
 export async function setupConsoleLogSpy() {
   const { createCustomConsole } = await import('./console')
 

pnpm-lock.yaml

@@ -28,6 +28,7 @@
     "tinyrainbow": "^1.2.0",
     "tinyspy": "^1.0.2",
     "url": "^0.11.0",
+    "vite-node": "workspace:*",
     "vitest": "workspace:*",
     "vitest-environment-custom": "file:./vitest-environment-custom",
     "vue": "^3.4.26",

test/core/package.json

@@ -0,0 +1 @@
+text

test/core/src/file-txt.txt

@@ -1,5 +1,6 @@
 // @vitest-environment jsdom
 
+// import { KNOWN_ASSET_RE } from 'vite-node/constants'
 import { describe, expect, it } from 'vitest'
 
 const _require = require
@@ -11,9 +12,14 @@ describe('using "require" to import a module', () => {
     const scss = _require('./../src/file-scss.scss')
     const less = _require('./../src/file-less.less')
 
-    expect(css).toEqual({})
-    expect(sass).toEqual({})
-    expect(scss).toEqual({})
-    expect(less).toEqual({})
+    expect(css).toEqual('')
+    expect(sass).toEqual('')
+    expect(scss).toEqual('')
+    expect(less).toEqual('')
+  })
+
+  it('importing assets works', () => {
+    const path = _require.resolve('./../src/file-txt.txt')
+    expect(_require('./../src/file-txt.txt')).toBe(path)
   })
 })