vite Architecture Docs
Home / File/ client-reload.spec.ts — vite Source File

client-reload.spec.ts — vite Source File

Architecture documentation for client-reload.spec.ts, a typescript file in the vite codebase. 4 imports, 0 dependents.

File typescript ViteCore ConfigEngine 4 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  72d785d7_20c3_3c30_f439_d3f2404d57cb["client-reload.spec.ts"]
  51e96894_3556_ed5c_1ede_97d449867adf["node:path"]
  72d785d7_20c3_3c30_f439_d3f2404d57cb --> 51e96894_3556_ed5c_1ede_97d449867adf
  54c37fea_4fe7_2693_71cb_1276b77f55f9["vite"]
  72d785d7_20c3_3c30_f439_d3f2404d57cb --> 54c37fea_4fe7_2693_71cb_1276b77f55f9
  a340ba46_b2b7_3048_3bb3_6907a74c8464["vitest"]
  72d785d7_20c3_3c30_f439_d3f2404d57cb --> a340ba46_b2b7_3048_3bb3_6907a74c8464
  d3fd5575_295b_d6be_24dd_62d277645dc9["~utils"]
  72d785d7_20c3_3c30_f439_d3f2404d57cb --> d3fd5575_295b_d6be_24dd_62d277645dc9
  style 72d785d7_20c3_3c30_f439_d3f2404d57cb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import path from 'node:path'
import { type ServerOptions, type ViteDevServer, createServer } from 'vite'
import { afterEach, describe, expect, test } from 'vitest'
import { hmrPorts, isServe, page, ports } from '~utils'

let server: ViteDevServer

afterEach(async () => {
  await server?.close()
})

async function testClientReload(serverOptions: ServerOptions) {
  // start server
  server = await createServer({
    root: path.resolve(import.meta.dirname, '..'),
    logLevel: 'silent',
    server: {
      strictPort: true,
      ...serverOptions,
    },
  })

  await server.listen()
  const serverUrl = server.resolvedUrls.local[0]

  // open page and wait for connection
  const connectedPromise = page.waitForEvent('console', {
    predicate: (message) => message.text().includes('[vite] connected.'),
    timeout: 5000,
  })
  await page.goto(serverUrl)
  await connectedPromise

  // input state
  await page.locator('input').fill('hello')

  // restart and wait for reconnection after reload
  const reConnectedPromise = page.waitForEvent('console', {
    predicate: (message) => message.text().includes('[vite] connected.'),
    timeout: 5000,
  })
  await server.restart()
  await reConnectedPromise
  expect(await page.textContent('input')).toBe('')
}

describe.runIf(isServe)('client-reload', () => {
  test('default', async () => {
    await testClientReload({
      port: ports['client-reload'],
    })
  })

  test('custom hmr port', async () => {
    await testClientReload({
      port: ports['client-reload/hmr-port'],
      hmr: {
        port: hmrPorts['client-reload/hmr-port'],
      },
    })
  })

  test('custom hmr port and cross origin isolation', async () => {
    await testClientReload({
      port: ports['client-reload/cross-origin'],
      hmr: {
        port: hmrPorts['client-reload/cross-origin'],
      },
      headers: {
        'Cross-Origin-Embedder-Policy': 'require-corp',
        'Cross-Origin-Opener-Policy': 'same-origin',
      },
    })
  })
})

Domain

Subdomains

Functions

Dependencies

  • node:path
  • vite
  • vitest
  • ~utils

Source

Frequently Asked Questions

What does client-reload.spec.ts do?
client-reload.spec.ts is a source file in the vite codebase, written in typescript. It belongs to the ViteCore domain, ConfigEngine subdomain.
What functions are defined in client-reload.spec.ts?
client-reload.spec.ts defines 1 function(s): testClientReload.
What does client-reload.spec.ts depend on?
client-reload.spec.ts imports 4 module(s): node:path, vite, vitest, ~utils.
Where is client-reload.spec.ts in the architecture?
client-reload.spec.ts is located at playground/client-reload/__tests__/client-reload.spec.ts (domain: ViteCore, subdomain: ConfigEngine, directory: playground/client-reload/__tests__).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free