diff --git a/packages/browser/src/client/tester/tester.html b/packages/browser/src/client/tester/tester.html
index 8586e2166f22..5bd4822cf02b 100644
--- a/packages/browser/src/client/tester/tester.html
+++ b/packages/browser/src/client/tester/tester.html
@@ -5,17 +5,6 @@
Vitest Browser Tester
-
diff --git a/packages/browser/src/node/plugin.ts b/packages/browser/src/node/plugin.ts
index 737a9cc9d744..14c216cfa1ff 100644
--- a/packages/browser/src/node/plugin.ts
+++ b/packages/browser/src/node/plugin.ts
@@ -425,7 +425,7 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => {
name: 'vitest:browser:transform-tester-html',
enforce: 'pre',
async transformIndexHtml(html, ctx) {
- if (!ctx.path.startsWith(browserServer.prefixTesterUrl)) {
+ if (ctx.filename !== browserServer.testerFilepath) {
return
}
@@ -439,14 +439,15 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => {
? browserServer.stateJs
: await browserServer.stateJs
- const testerScripts: HtmlTagDescriptor[] = []
- if (resolve(distRoot, 'client/tester/tester.html') !== browserServer.testerFilepath) {
+ const testerTags: HtmlTagDescriptor[] = []
+ const isDefaultTemplate = resolve(distRoot, 'client/tester/tester.html') === browserServer.testerFilepath
+ if (!isDefaultTemplate) {
const manifestContent = browserServer.manifest instanceof Promise
? await browserServer.manifest
: browserServer.manifest
const testerEntry = manifestContent['tester/tester.html']
- testerScripts.push({
+ testerTags.push({
tag: 'script',
attrs: {
type: 'module',
@@ -459,7 +460,7 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => {
for (const importName of testerEntry.imports || []) {
const entryManifest = manifestContent[importName]
if (entryManifest) {
- testerScripts.push(
+ testerTags.push(
{
tag: 'link',
attrs: {
@@ -473,6 +474,24 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => {
}
}
}
+ else {
+ // inject the reset style only in the default template,
+ // allowing users to customize the style in their own template
+ testerTags.push({
+ tag: 'style',
+ children: `
+html {
+ padding: 0;
+ margin: 0;
+}
+body {
+ padding: 0;
+ margin: 0;
+ min-height: 100vh;
+}`,
+ injectTo: 'head',
+ })
+ }
return [
{
@@ -504,7 +523,7 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => {
} as const
: null,
...browserServer.testerScripts,
- ...testerScripts,
+ ...testerTags,
{
tag: 'script',
attrs: {
diff --git a/packages/browser/src/node/serverTester.ts b/packages/browser/src/node/serverTester.ts
index 18ea0c0d99ee..f9ea918796b9 100644
--- a/packages/browser/src/node/serverTester.ts
+++ b/packages/browser/src/node/serverTester.ts
@@ -3,6 +3,7 @@ import type { Connect } from 'vite'
import type { BrowserServer } from './server'
import crypto from 'node:crypto'
import { stringify } from 'flatted'
+import { join } from 'pathe'
import { replacer } from './utils'
export async function resolveTester(
@@ -58,7 +59,8 @@ export async function resolveTester(
: await server.testerHtml
try {
- const indexhtml = await server.vite.transformIndexHtml(url.pathname, testerHtml)
+ const url = join('/@fs/', server.testerFilepath)
+ const indexhtml = await server.vite.transformIndexHtml(url, testerHtml)
return replacer(indexhtml, {
__VITEST_FAVICON__: server.faviconUrl,
__VITEST_INJECTOR__: injector,