feat!: transformMode affects only test files, not regular files (#3491)

Author: sheremet-va

docs/config/index.md

@@ -1120,41 +1120,28 @@ Will call [`vi.unstubAllEnvs`](/api/vi#vi-unstuballenvs) before each test.
 
 Will call [`vi.unstubAllGlobals`](/api/vi#vi-unstuballglobals) before each test.
 
-### transformMode
+### testTransformMode
 
-- **Type:** `{ web?, ssr? }`
+ - **Type:** `{ web?, ssr? }`
+ - **Version:** Since Vitest 0.32.0
 
-Determine the transform method of modules
+ Determine the transform method for all modules inported inside a test that matches the glob pattern. By default, relies on the environment. For example, tests with JSDOM environment will process all files with `ssr: false` flag and tests with Node environment process all modules with `ssr: true`.
 
-#### transformMode.ssr
+ #### testTransformMode.ssr
 
-- **Type:** `RegExp[]`
-- **Default:** `[/\.([cm]?[jt]sx?|json)$/]`
+ - **Type:** `string[]`
+ - **Default:** `[]`
 
-Use SSR transform pipeline for the specified files.<br>
-Vite plugins will receive `ssr: true` flag when processing those files.
+ Use SSR transform pipeline for all modules inside specified tests.<br>
+ Vite plugins will receive `ssr: true` flag when processing those files.
 
-#### transformMode&#46;web
+ #### testTransformMode&#46;web
 
-- **Type:** `RegExp[]`
-- **Default:** *modules other than those specified in `transformMode.ssr`*
+ - **Type:** `string[]`
+ - **Default:** `[]`
 
-First do a normal transform pipeline (targeting browser), then do a SSR rewrite to run the code in Node.<br>
-Vite plugins will receive `ssr: false` flag when processing those files.
-
-When you use JSX as component models other than React (e.g. Vue JSX or SolidJS), you might want to config as following to make `.tsx` / `.jsx` transformed as client-side components:
-
-```ts
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  test: {
-    transformMode: {
-      web: [/\.[jt]sx$/],
-    },
-  },
-})
-```
+ First do a normal transform pipeline (targeting browser), then do a SSR rewrite to run the code in Node.<br>
+ Vite plugins will receive `ssr: false` flag when processing those files.
 
 ### snapshotFormat<NonProjectOption />
 

examples/react-storybook/package.json

@@ -28,7 +28,7 @@
     "@testing-library/react": "^12.1.5",
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.17",
-    "@vitejs/plugin-react": "^1.3.2",
+    "@vitejs/plugin-react": "^4.0.1",
     "@vitest/ui": "latest",
     "babel-loader": "^8.2.5",
     "jsdom": "latest",

examples/react-testing-lib-msw/package.json

@@ -19,7 +19,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.17",
-    "@vitejs/plugin-react": "^1.3.2",
+    "@vitejs/plugin-react": "^4.0.1",
     "@vitest/ui": "latest",
     "cross-fetch": "^3.1.5",
     "jsdom": "latest",

examples/solid/vite.config.mjs

@@ -7,9 +7,6 @@ import solid from 'vite-plugin-solid'
 export default defineConfig({
   test: {
     environment: 'jsdom',
-    transformMode: {
-      web: [/.[jt]sx?/],
-    },
     threads: false,
     isolate: false,
   },

examples/vue-jsx/vite.config.ts

@@ -7,8 +7,5 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
-    transformMode: {
-      web: [/.[tj]sx$/],
-    },
   },
 })

packages/vitest/src/integrations/env/edge-runtime.ts

@@ -4,6 +4,7 @@ import { populateGlobal } from './utils'
 
 export default <Environment>({
   name: 'edge-runtime',
+  transformMode: 'ssr',
   async setup(global) {
     const { EdgeVM } = await importModule('@edge-runtime/vm') as typeof import('@edge-runtime/vm')
     const vm = new EdgeVM({

packages/vitest/src/integrations/env/happy-dom.ts

@@ -4,6 +4,7 @@ import { populateGlobal } from './utils'
 
 export default <Environment>({
   name: 'happy-dom',
+  transformMode: 'web',
   async setup(global) {
     // happy-dom v3 introduced a breaking change to Window, but
     // provides GlobalWindow as a way to use previous behaviour

packages/vitest/src/integrations/env/index.ts

@@ -1,4 +1,6 @@
-import type { VitestEnvironment } from '../../types/config'
+import type { BuiltinEnvironment, VitestEnvironment } from '../../types/config'
+import type { VitestExecutor } from '../../node'
+import type { Environment } from '../../types'
 import node from './node'
 import jsdom from './jsdom'
 import happy from './happy-dom'
@@ -19,10 +21,28 @@ export const envPackageNames: Record<Exclude<keyof typeof environments, 'node'>,
   'edge-runtime': '@edge-runtime/vm',
 }
 
+function isBuiltinEnvironment(env: VitestEnvironment): env is BuiltinEnvironment {
+  return env in environments
+}
+
 export function getEnvPackageName(env: VitestEnvironment) {
   if (env === 'node')
     return null
   if (env in envPackageNames)
     return (envPackageNames as any)[env]
   return `vitest-environment-${env}`
 }
+
+export async function loadEnvironment(name: VitestEnvironment, executor: VitestExecutor): Promise<Environment> {
+  if (isBuiltinEnvironment(name))
+    return environments[name]
+  const packageId = (name[0] === '.' || name[0] === '/') ? name : `vitest-environment-${name}`
+  const pkg = await executor.executeId(packageId)
+  if (!pkg || !pkg.default || typeof pkg.default !== 'object' || typeof pkg.default.setup !== 'function') {
+    throw new Error(
+      `Environment "${name}" is not a valid environment. `
+    + `Path "${packageId}" should export default object with a "setup" method.`,
+    )
+  }
+  return pkg.default
+}

packages/vitest/src/integrations/env/jsdom.ts

@@ -28,6 +28,7 @@ function catchWindowErrors(window: Window) {
 
 export default <Environment>({
   name: 'jsdom',
+  transformMode: 'web',
   async setup(global, { jsdom = {} }) {
     const {
       CookieJar,

packages/vitest/src/integrations/env/node.ts

@@ -3,6 +3,7 @@ import type { Environment } from '../../types'
 
 export default <Environment>({
   name: 'node',
+  transformMode: 'ssr',
   async setup(global) {
     global.console.Console = Console
     return {