test: improve dx for tests

.eslintrc.cjs

@@ -105,7 +105,8 @@ module.exports = defineConfig({
       files: ['playground/**'],
       rules: {
         'node/no-extraneous-import': 'off',
-        'node/no-extraneous-require': 'off'
+        'node/no-extraneous-require': 'off',
+        'node/no-missing-import': 'off'
       }
     },
     {

.prettierignore

@@ -4,6 +4,7 @@ packages/vite/temp/
 packages/plugin-react/dist/
 packages/plugin-vue/dist/
 packages/*/CHANGELOG.md
+playground-temp/
 LICENSE.md
 .prettierignore
 pnpm-lock.yaml

CONTRIBUTING.md

@@ -95,15 +95,17 @@ Other than tests under `playground/` for integration tests, packages might conta
 
 ### Test Env and Helpers
 
-Inside playground tests, a global `page` object is automatically available, which is a Playwright [`Page`](https://playwright.dev/docs/api/class-page) instance that has already navigated to the served page of the current playground. So writing a test is as simple as:
+Inside playground tests, you can import the `page` object from `~utils`, which is a Playwright [`Page`](https://playwright.dev/docs/api/class-page) instance that has already navigated to the served page of the current playground. So writing a test is as simple as:
 
 ```js
+import { page } from '~utils'
+
 test('should work', async () => {
   expect(await page.textContent('.foo')).toMatch('foo')
 })
 ```
 
-Some common test helpers, e.g. `testDir`, `isBuild` or `editFile` are available in `playground/testUtils.ts`.
+Some common test helpers, e.g. `testDir`, `isBuild` or `editFile` are also available in the utils. Source code is located at `playground/test-utils.ts`.
 
 Note: The test build environment uses a [different default set of Vite config](https://github.com/vitejs/vite/blob/9c6501d9c363eaa3c1e7708d531fb2a92b633db6/scripts/vitestSetup.ts#L102-L122) to skip transpilation during tests to make it faster. This may produce a different result compared to the default production build.
 

playground/alias/__tests__/alias.spec.ts

@@ -1,4 +1,5 @@
-import { editFile, getColor, untilUpdated } from '../../testUtils'
+import { editFile, getColor, page, untilUpdated } from '~utils'
+import { test, expect } from 'vitest'
 
 test('fs', async () => {
   expect(await page.textContent('.fs')).toMatch('[success] alias to fs path')

playground/assets/__tests__/assets.spec.ts

@@ -8,8 +8,12 @@ import {
   readFile,
   editFile,
   notifyRebuildComplete,
-  untilUpdated
-} from '../../testUtils'
+  untilUpdated,
+  browserLogs,
+  page,
+  watcher
+} from '~utils'
+import { test, expect, describe } from 'vitest'
 
 const assetMatch = isBuild
   ? /\/foo\/assets\/asset\.\w{8}\.png/

playground/backend-integration/__tests__/backend-integration.spec.ts

@@ -1,11 +1,14 @@
 import {
+  browserErrors,
+  browserLogs,
   editFile,
   getColor,
   isBuild,
   isServe,
+  page,
   readManifest,
   untilUpdated
-} from '../../testUtils'
+} from '~utils'
 
 const outerAssetMatch = isBuild
   ? /\/dev\/assets\/logo\.\w{8}\.png/

playground/cli-module/__tests__/cli-module.spec.ts

@@ -1,3 +1,4 @@
+import { page } from '~utils'
 import { port } from './serve'
 
 test('cli should work in "type":"module" package', async () => {

playground/cli-module/__tests__/serve.ts

@@ -1,14 +1,11 @@
 // this is automatically detected by scripts/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
-import path from 'path'
 import execa from 'execa'
-import { workspaceRoot, ports } from '../../testUtils'
 import kill from 'kill-port'
+import { isWindows, viteBinPath, ports } from '~utils'
 
-const isWindows = process.platform === 'win32'
 export const port = ports['cli-module']
-const viteBin = path.join(workspaceRoot, 'packages', 'vite', 'bin', 'vite.js')
 
 export async function serve(root: string, isProd: boolean) {
   // collect stdout and stderr streams from child processes here to avoid interfering with regular jest output
@@ -39,7 +36,7 @@ export async function serve(root: string, isProd: boolean) {
 
   // only run `vite build` when needed
   if (isProd) {
-    const buildCommand = `${viteBin} build`
+    const buildCommand = `${viteBinPath} build`
     try {
       const buildProcess = execa.command(buildCommand, {
         cwd: root,
@@ -62,7 +59,7 @@ export async function serve(root: string, isProd: boolean) {
   if (isProd) {
     viteServerArgs.unshift('preview')
   }
-  const serverCommand = `${viteBin} ${viteServerArgs.join(' ')}`
+  const serverCommand = `${viteBinPath} ${viteServerArgs.join(' ')}`
   const serverProcess = execa.command(serverCommand, {
     cwd: root,
     stdio: 'pipe'

playground/cli/__tests__/cli.spec.ts

@@ -1,3 +1,4 @@
+import { page } from '~utils'
 import { port } from './serve'
 
 test('cli should work', async () => {

playground/cli/__tests__/serve.ts

@@ -1,14 +1,11 @@
 // this is automatically detected by scripts/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 
-import path from 'path'
 import execa from 'execa'
-import { workspaceRoot, ports } from '../../testUtils'
+import { ports, isWindows, viteBinPath } from '~utils'
 import kill from 'kill-port'
 
-const isWindows = process.platform === 'win32'
-const port = (exports.port = ports.cli)
-const viteBin = path.join(workspaceRoot, 'packages', 'vite', 'bin', 'vite.js')
+export const port = ports.cli
 
 export async function serve(root: string, isProd: boolean) {
   // collect stdout and stderr streams from child processes here to avoid interfering with regular jest output
@@ -39,7 +36,7 @@ export async function serve(root: string, isProd: boolean) {
 
   // only run `vite build` when needed
   if (isProd) {
-    const buildCommand = `${viteBin} build`
+    const buildCommand = `${viteBinPath} build`
     try {
       const buildProcess = execa.command(buildCommand, {
         cwd: root,
@@ -62,7 +59,7 @@ export async function serve(root: string, isProd: boolean) {
   if (isProd) {
     viteServerArgs.unshift('preview')
   }
-  const serverCommand = `${viteBin} ${viteServerArgs.join(' ')}`
+  const serverCommand = `${viteBinPath} ${viteServerArgs.join(' ')}`
   const serverProcess = execa.command(serverCommand, {
     cwd: root,
     stdio: 'pipe'

playground/css-codesplit-cjs/__tests__/css-codesplit.spec.ts

@@ -1,4 +1,4 @@
-import { findAssetFile, getColor, isBuild, readManifest } from '../../testUtils'
+import { findAssetFile, getColor, isBuild, readManifest } from '~utils'
 
 test('should load both stylesheets', async () => {
   expect(await getColor('h1')).toBe('red')

playground/css-codesplit/__tests__/css-codesplit.spec.ts

@@ -1,4 +1,4 @@
-import { findAssetFile, getColor, isBuild, readManifest } from '../../testUtils'
+import { findAssetFile, getColor, isBuild, page, readManifest } from '~utils'
 
 test('should load all stylesheets', async () => {
   expect(await getColor('h1')).toBe('red')

playground/css-sourcemap/__tests__/build.spec.ts

@@ -1,4 +1,4 @@
-import { isBuild } from '../../testUtils'
+import { isBuild, serverLogs } from '~utils'
 
 test.runIf(isBuild)('should not output sourcemap warning (#4939)', () => {
   serverLogs.forEach((log) => {

playground/css-sourcemap/__tests__/serve.spec.ts

@@ -2,8 +2,10 @@ import { URL } from 'url'
 import {
   extractSourcemap,
   formatSourcemapForSnapshot,
-  isServe
-} from '../../testUtils'
+  isServe,
+  page,
+  serverLogs
+} from '~utils'
 
 describe.runIf(isServe)('serve', () => {
   const getStyleTagContentIncluding = async (content: string) => {

playground/css/__tests__/css.spec.ts

@@ -1,15 +1,14 @@
-import fs from 'fs'
-import path from 'path'
 import {
   editFile,
   findAssetFile,
   getBg,
   getColor,
   isBuild,
+  page,
   removeFile,
-  testDir,
+  serverLogs,
   untilUpdated
-} from '../../testUtils'
+} from '~utils'
 
 // note: tests should retrieve the element at the beginning of test and reuse it
 // in later assertions to ensure CSS HMR doesn't reload the page

playground/css/__tests__/postcss-plugins-different-dir.spec.ts

@@ -1,4 +1,4 @@
-import { getColor, getBgColor, ports } from '../../testUtils'
+import { getColor, getBgColor, ports, page } from '~utils'
 import { createServer } from 'vite'
 import path from 'path'
 

playground/css/postcss-caching/css.spec.ts

@@ -1,4 +1,4 @@
-import { getColor, ports } from '../../testUtils'
+import { getColor, page, ports } from '~utils'
 import { createServer } from 'vite'
 import path from 'path'
 

playground/data-uri/__tests__/data-uri.spec.ts

@@ -1,4 +1,4 @@
-import { isBuild, findAssetFile } from '../../testUtils'
+import { isBuild, findAssetFile, page } from '~utils'
 
 test('plain', async () => {
   expect(await page.textContent('.plain')).toBe('hi')

playground/define/__tests__/define.spec.ts

@@ -1,5 +1,8 @@
+import { page } from '~utils'
+import viteConfig from '../vite.config'
+
 test('string', async () => {
-  const defines = require('../vite.config.js').define
+  const defines = viteConfig.define
 
   expect(await page.textContent('.exp')).toBe(
     String(typeof eval(defines.__EXP__))

playground/dynamic-import/__tests__/dynamic-import.spec.ts

@@ -1,4 +1,4 @@
-import { getColor, isBuild, untilUpdated } from '../../testUtils'
+import { getColor, page, serverLogs, untilUpdated } from '~utils'
 
 test('should load literal dynamic import', async () => {
   await page.click('.baz')

playground/env-nested/__tests__/env-nested.spec.ts

@@ -1,4 +1,4 @@
-import { isBuild } from '../../testUtils'
+import { isBuild, page } from '~utils'
 
 const mode = isBuild ? `production` : `development`
 

playground/env/__tests__/env.spec.ts

@@ -1,4 +1,4 @@
-import { isBuild } from '../../testUtils'
+import { isBuild, page } from '~utils'
 
 const mode = isBuild ? `production` : `development`
 

playground/extensions/__tests__/extensions.spec.ts

@@ -1,3 +1,5 @@
+import { browserLogs, page } from '~utils'
+
 test('should have no 404s', () => {
   browserLogs.forEach((msg) => {
     expect(msg).not.toMatch('404')

playground/file-delete-restore/__tests__/file-delete-restore.spec.ts

@@ -3,8 +3,9 @@ import {
   untilUpdated,
   removeFile,
   addFile,
-  isBuild
-} from '../../testUtils'
+  isBuild,
+  page
+} from '~utils'
 
 test.runIf(isBuild)(
   'should hmr when file is deleted and restored',

playground/fs-serve/__tests__/fs-serve.spec.ts

@@ -1,4 +1,4 @@
-import { isServe } from '../../testUtils'
+import { isServe, page, viteTestUrl } from '~utils'
 
 const json = require('../safe.json')
 const stringified = JSON.stringify(json)

playground/glob-import/__tests__/glob-import.spec.ts

@@ -2,9 +2,10 @@ import {
   addFile,
   editFile,
   isBuild,
+  page,
   removeFile,
   untilUpdated
-} from '../../testUtils'
+} from '~utils'
 
 const filteredResult = {
   './alias.js': {

playground/hmr/__tests__/hmr.spec.ts

@@ -1,4 +1,12 @@
-import { isBuild, editFile, untilUpdated, getBg } from '../../testUtils'
+import {
+  isBuild,
+  editFile,
+  untilUpdated,
+  getBg,
+  page,
+  browserLogs,
+  viteTestUrl
+} from '~utils'
 
 test('should render', async () => {
   expect(await page.textContent('.app')).toBe('1')

playground/hmr/tsconfig.json

@@ -1,6 +1,7 @@
 {
+  "extends": "../tsconfig.json",
   "include": ["."],
-  "exclude": ["**/dist/**"],
+  "exclude": ["**/dist/**", "**/__tests__/**"],
   "compilerOptions": {
     "target": "es2019",
     "module": "esnext",

playground/html/__tests__/html.spec.ts

@@ -1,4 +1,4 @@
-import { getColor, isBuild, editFile, isServe } from '../../testUtils'
+import { getColor, isBuild, editFile, isServe, page, viteTestUrl } from '~utils'
 
 function testPage(isNested: boolean) {
   test('pre transform', async () => {

playground/js-sourcemap/__tests__/build.spec.ts

@@ -1,4 +1,4 @@
-import { isBuild } from '../../testUtils'
+import { isBuild, serverLogs } from '~utils'
 
 test.runIf(isBuild)('should not output sourcemap warning (#4939)', () => {
   serverLogs.forEach((log) => {

playground/js-sourcemap/__tests__/serve.spec.ts

@@ -2,8 +2,10 @@ import { URL } from 'url'
 import {
   extractSourcemap,
   formatSourcemapForSnapshot,
-  isBuild
-} from '../../testUtils'
+  isBuild,
+  page,
+  serverLogs
+} from '~utils'
 
 if (!isBuild) {
   test('js', async () => {

playground/json/__tests__/json.spec.ts

@@ -1,4 +1,4 @@
-import { isBuild } from '../../testUtils'
+import { isBuild, page } from '~utils'
 
 const json = require('../test.json')
 const deepJson = require('vue/package.json')

playground/legacy/__tests__/legacy.spec.ts

@@ -4,8 +4,9 @@ import {
   isBuild,
   readManifest,
   untilUpdated,
-  getColor
-} from '../../testUtils'
+  getColor,
+  page
+} from '~utils'
 
 test('should work', async () => {
   expect(await page.textContent('#app')).toMatch('Hello')

playground/legacy/__tests__/ssr/legacy-ssr.spec.ts

@@ -1,4 +1,4 @@
-import { isBuild } from '../../../testUtils'
+import { isBuild, page } from '~utils'
 import { port } from './serve'
 
 const url = `http://localhost:${port}`

playground/legacy/__tests__/ssr/serve.ts

@@ -1,7 +1,7 @@
 // this is automatically detected by scripts/vitestSetup.ts and will replace
 // the default e2e test serve behavior
 import path from 'path'
-import { ports } from '../../../testUtils'
+import { ports } from '~utils'
 
 export const port = ports['legacy/ssr']
 

playground/lib/__tests__/lib.spec.ts

@@ -1,4 +1,11 @@
-import { isBuild, isServe, testDir, untilUpdated } from '../../testUtils'
+import {
+  isBuild,
+  isServe,
+  testDir,
+  untilUpdated,
+  page,
+  serverLogs
+} from '~utils'
 import path from 'path'
 import fs from 'fs'