feat: process log

packages/browser/src/client/main.ts

@@ -24,6 +24,11 @@ const browserHashMap = new Map<string, string>()
 const url = new URL(location.href)
 const testId = url.searchParams.get('id') || 'unknown'
 
+const importId = (id: string) => {
+  const name = `/@id/${id}`
+  return import(name)
+}
+
 const getQueryPaths = () => {
   return url.searchParams.getAll('path')
 }
@@ -51,13 +56,15 @@ async function loadConfig() {
 
 const { Date } = globalThis
 
-const interceptLog = (client: VitestClient) => {
+const interceptLog = async (client: VitestClient) => {
+  const { stringify, format } = await importId('vitest/utils') as typeof import('vitest/utils')
   // TODO: add support for more console methods
   const { log, info, error } = console
-  const processLog = (args: unknown[]) => {
-    // TODO: make better log, use concordance(?)
-    return args.map(String).join(' ')
-  }
+  const processLog = (args: unknown[]) => args.map((a) => {
+    if (a instanceof Element)
+      return stringify(a)
+    return format(a)
+  }).join(' ')
   const sendLog = (type: 'stdout' | 'stderr', args: unknown[]) => {
     const content = processLog(args)
     const unknownTestId = '__vitest__unknown_test__'
@@ -102,7 +109,7 @@ ws.addEventListener('open', async () => {
   const iFrame = document.getElementById('vitest-ui') as HTMLIFrameElement
   iFrame.setAttribute('src', '/__vitest__/')
 
-  interceptLog(client)
+  await interceptLog(client)
   await runTests(paths, config, client)
 })
 
@@ -112,14 +119,10 @@ async function runTests(paths: string[], config: any, client: VitestClient) {
   const viteClientPath = '/@vite/client'
   await import(viteClientPath)
 
-  // we use dynamic import here, because this file is bundled with UI,
-  // but we need to resolve correct path at runtime
-  const path = '/__vitest_index__'
-  const { startTests, setupCommonEnv, setupSnapshotEnvironment } = await import(path) as typeof import('vitest/browser')
+  const { startTests, setupCommonEnv, setupSnapshotEnvironment } = await importId('vitest/browser') as typeof import('vitest/browser')
 
   if (!runner) {
-    const runnerPath = '/__vitest_runners__'
-    const { VitestTestRunner } = await import(runnerPath) as typeof import('vitest/runners')
+    const { VitestTestRunner } = await importId('vitest/runners') as typeof import('vitest/runners')
     const BrowserRunner = createBrowserRunner(VitestTestRunner)
     runner = new BrowserRunner({ config, client, browserHashMap })
   }

packages/vitest/package.json

@@ -61,6 +61,10 @@
       "types": "./dist/environments.d.ts",
       "import": "./dist/environments.js"
     },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js"
+    },
     "./config": {
       "types": "./config.d.ts",
       "require": "./dist/config.cjs",

packages/vitest/rollup.config.js

@@ -28,18 +28,20 @@ const entries = [
   'src/runtime/entry.ts',
   'src/integrations/spy.ts',
   'src/coverage.ts',
+  'src/public/utils.ts',
 ]
 
-const dtsEntries = [
-  'src/index.ts',
-  'src/node.ts',
-  'src/environments.ts',
-  'src/browser.ts',
-  'src/runners.ts',
-  'src/suite.ts',
-  'src/config.ts',
-  'src/coverage.ts',
-]
+const dtsEntries = {
+  index: 'src/index.ts',
+  node: 'src/node.ts',
+  environments: 'src/environments.ts',
+  browser: 'src/browser.ts',
+  runners: 'src/runners.ts',
+  suite: 'src/suite.ts',
+  config: 'src/config.ts',
+  coverage: 'src/coverage.ts',
+  utils: 'src/public/utils.ts',
+}
 
 const external = [
   ...builtinModules,

packages/vitest/src/public/utils.ts

@@ -0,0 +1 @@
+export * from '@vitest/utils'

packages/vitest/utils.d.ts

@@ -0,0 +1 @@
+export * from './dist/utils.js'

test/browser/test/dom.test.ts

@@ -6,7 +6,7 @@ test('render div', async () => {
   document.body.appendChild(div)
   // TODO: test console
   // eslint-disable-next-line no-console
-  console.log('hello world')
+  console.log('hello world', div)
   console.error('error world')
   expect(div.textContent).toBe('Hello World')
 })