From 6c1cc78bac6ec6d7b8e1dab97a99b177887e61aa Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Tue, 16 Jan 2024 21:50:38 +0900 Subject: [PATCH] fix(browser): fix browser testing url for https (#4855) --- .github/workflows/ci.yml | 2 ++ packages/vitest/src/node/logger.ts | 4 ++- packages/vitest/src/node/pools/browser.ts | 3 ++- pnpm-lock.yaml | 12 +++++++++ .../browser/fixtures/server-url/basic.test.ts | 5 ++++ .../fixtures/server-url/vitest.config.ts | 26 ++++++++++++++++++ test/browser/package.json | 1 + test/browser/specs/server-url.test.mjs | 27 +++++++++++++++++++ test/browser/tsconfig.json | 3 ++- 9 files changed, 80 insertions(+), 3 deletions(-) create mode 100644 test/browser/fixtures/server-url/basic.test.ts create mode 100644 test/browser/fixtures/server-url/vitest.config.ts create mode 100644 test/browser/specs/server-url.test.mjs diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 741aa592c48f..c72b0bc15e1a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -143,6 +143,7 @@ jobs: strategy: matrix: browser: [[chrome, chromium], [firefox, firefox], [edge, webkit]] + fail-fast: false timeout-minutes: 30 @@ -186,6 +187,7 @@ jobs: strategy: matrix: browser: [[chrome, chromium], [edge, webkit]] + fail-fast: false timeout-minutes: 30 diff --git a/packages/vitest/src/node/logger.ts b/packages/vitest/src/node/logger.ts index be6df9eceabf..eb6586940976 100644 --- a/packages/vitest/src/node/logger.ts +++ b/packages/vitest/src/node/logger.ts @@ -166,7 +166,9 @@ export class Logger { const name = project.getName() const output = project.isCore() ? '' : ` [${name}]` - this.log(c.dim(c.green(` ${output} Browser runner started at http://${project.config.browser.api?.host || 'localhost'}:${c.bold(`${project.browser.config.server.port}`)}`))) + const resolvedUrls = project.browser.resolvedUrls + const origin = resolvedUrls?.local[0] ?? resolvedUrls?.network[0] + this.log(c.dim(c.green(` ${output} Browser runner started at ${new URL('/', origin)}`))) }) if (this.ctx.config.ui) diff --git a/packages/vitest/src/node/pools/browser.ts b/packages/vitest/src/node/pools/browser.ts index fdbaa08f8af4..f3874ad5d61b 100644 --- a/packages/vitest/src/node/pools/browser.ts +++ b/packages/vitest/src/node/pools/browser.ts @@ -38,7 +38,8 @@ export function createBrowserPool(ctx: Vitest): ProcessPool { const provider = project.browserProvider! providers.add(provider) - const origin = `http://${ctx.config.browser.api?.host || 'localhost'}:${project.browser!.config.server.port}` + const resolvedUrls = project.browser?.resolvedUrls + const origin = resolvedUrls?.local[0] ?? resolvedUrls?.network[0] const paths = files.map(file => relative(project.config.root, file)) if (project.config.browser.isolate) { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 909396663e6a..23bf5a21ad9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1482,6 +1482,9 @@ importers: test/browser: devDependencies: + '@vitejs/plugin-basic-ssl': + specifier: ^1.0.2 + version: 1.0.2(vite@5.0.2) '@vitest/browser': specifier: workspace:* version: link:../../packages/browser @@ -10231,6 +10234,15 @@ packages: vite-plugin-pwa: 0.16.7(vite@5.0.2)(workbox-build@7.0.0)(workbox-window@7.0.0) dev: true + /@vitejs/plugin-basic-ssl@1.0.2(vite@5.0.2): + resolution: {integrity: sha512-DKHKVtpI+eA5fvObVgQ3QtTGU70CcCnedalzqmGSR050AzKZMdUzgC8KmlOneHWH8dF2hJ3wkC9+8FDVAaDRCw==} + engines: {node: '>=14.6.0'} + peerDependencies: + vite: ^5.0.0 + dependencies: + vite: 5.0.2(@types/node@18.18.9)(less@4.1.3) + dev: true + /@vitejs/plugin-react@1.3.2: resolution: {integrity: sha512-aurBNmMo0kz1O4qRoY+FM4epSA39y3ShWGuqfLRA/3z0oEJAdtoSfgA3aO98/PCCHAqMaduLxIxErWrVKIFzXA==} engines: {node: '>=12.0.0'} diff --git a/test/browser/fixtures/server-url/basic.test.ts b/test/browser/fixtures/server-url/basic.test.ts new file mode 100644 index 000000000000..9bb0283e10c6 --- /dev/null +++ b/test/browser/fixtures/server-url/basic.test.ts @@ -0,0 +1,5 @@ +import { expect, test } from "vitest"; + +test("basic", () => { + expect(1).toBe(1); +}) diff --git a/test/browser/fixtures/server-url/vitest.config.ts b/test/browser/fixtures/server-url/vitest.config.ts new file mode 100644 index 000000000000..201a7553d3e6 --- /dev/null +++ b/test/browser/fixtures/server-url/vitest.config.ts @@ -0,0 +1,26 @@ +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import { defineConfig } from 'vitest/config' +import basicSsl from '@vitejs/plugin-basic-ssl' + +// test https by +// TEST_HTTPS=1 pnpm test-fixtures --root fixtures/server-url + +const provider = process.env.PROVIDER || 'webdriverio'; +const browser = process.env.BROWSER || (provider === 'playwright' ? 'chromium' : 'chrome'); + +export default defineConfig({ + plugins: [ + !!process.env.TEST_HTTPS && basicSsl(), + ], + test: { + browser: { + enabled: true, + provider, + name: browser, + }, + }, + // separate cacheDir from test/browser/vite.config.ts + // to prevent pre-bundling related flakiness on Webkit + cacheDir: path.join(path.dirname(fileURLToPath(import.meta.url)), "node_modules/.vite") +}) diff --git a/test/browser/package.json b/test/browser/package.json index 329c30e07863..c6eadd18a4bd 100644 --- a/test/browser/package.json +++ b/test/browser/package.json @@ -11,6 +11,7 @@ "coverage": "vitest --coverage.enabled --coverage.provider=istanbul --browser.headless=yes" }, "devDependencies": { + "@vitejs/plugin-basic-ssl": "^1.0.2", "@vitest/browser": "workspace:*", "@vitest/cjs-lib": "link:./cjs-lib", "execa": "^7.1.1", diff --git a/test/browser/specs/server-url.test.mjs b/test/browser/specs/server-url.test.mjs new file mode 100644 index 000000000000..d6413b6bfe2e --- /dev/null +++ b/test/browser/specs/server-url.test.mjs @@ -0,0 +1,27 @@ +import assert from 'node:assert' +import test from 'node:test' +import { execa } from 'execa' + +test('server-url http', async () => { + const result = await execa('npx', ['vitest', 'run', '--root=./fixtures/server-url', '--browser.headless'], { + env: { + CI: '1', + NO_COLOR: '1', + }, + }) + assert.match(result.stdout, /Browser runner started at http:\/\/localhost:5173\//) + assert.match(result.stdout, /Test Files {2}1 passed/) +}) + +// this test is skipped since browser warns self-signed https and it requires manual interaction. +// you can toggle "skip" to verify it locally. +test('server-url https', { skip: true }, async () => { + const result = await execa('npx', ['vitest', 'run', '--root=./fixtures/server-url'], { + env: { + NO_COLOR: '1', + TEST_HTTPS: '1', + }, + }) + assert.match(result.stdout, /Browser runner started at https:\/\/localhost:5173\//) + assert.match(result.stdout, /Test Files {2}1 passed/) +}) diff --git a/test/browser/tsconfig.json b/test/browser/tsconfig.json index c1bc047f4091..1b1263fab6c2 100644 --- a/test/browser/tsconfig.json +++ b/test/browser/tsconfig.json @@ -1,7 +1,8 @@ { "compilerOptions": { "rootDir": ".", - "module": "node16", + "module": "ESNext", + "moduleResolution": "Bundler", "paths": { "#src/*": ["./src/*"] },