From 807a2cbc4818462b9feaaecfedd0c49c6db8e4c8 Mon Sep 17 00:00:00 2001 From: Vladimir Date: Thu, 18 Jul 2024 12:44:00 +0200 Subject: [PATCH] fix: resolve assets imported with `require` (#6159) --- docs/guide/environment.md | 6 ++++++ packages/vitest/src/runtime/runVmTests.ts | 21 +++++++++++++++++---- packages/vitest/src/runtime/setup-node.ts | 21 +++++++++++++++++---- pnpm-lock.yaml | 3 +++ test/core/package.json | 1 + test/core/src/file-txt.txt | 1 + test/core/test/require.test.ts | 14 ++++++++++---- 7 files changed, 55 insertions(+), 12 deletions(-) create mode 100644 test/core/src/file-txt.txt diff --git a/docs/guide/environment.md b/docs/guide/environment.md index d6f899fe2e1d..88816518a91c 100644 --- a/docs/guide/environment.md +++ b/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: diff --git a/packages/vitest/src/runtime/runVmTests.ts b/packages/vitest/src/runtime/runVmTests.ts index 5b3b4107501e..621022a316cc 100644 --- a/packages/vitest/src/runtime/runVmTests.ts +++ b/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 +} diff --git a/packages/vitest/src/runtime/setup-node.ts b/packages/vitest/src/runtime/setup-node.ts index 5fe45557d895..100a7d302072 100644 --- a/packages/vitest/src/runtime/setup-node.ts +++ b/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') diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6eeaf2b778c9..f2b6d6f1b296 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1191,6 +1191,9 @@ importers: url: specifier: ^0.11.0 version: 0.11.0 + vite-node: + specifier: workspace:* + version: link:../../packages/vite-node vitest: specifier: workspace:* version: link:../../packages/vitest diff --git a/test/core/package.json b/test/core/package.json index dfbe63a501de..2439a810a807 100644 --- a/test/core/package.json +++ b/test/core/package.json @@ -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", diff --git a/test/core/src/file-txt.txt b/test/core/src/file-txt.txt new file mode 100644 index 000000000000..8e27be7d6154 --- /dev/null +++ b/test/core/src/file-txt.txt @@ -0,0 +1 @@ +text diff --git a/test/core/test/require.test.ts b/test/core/test/require.test.ts index 4d66074db582..17df9ace9714 100644 --- a/test/core/test/require.test.ts +++ b/test/core/test/require.test.ts @@ -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) }) })