Migrate test runner to vitest browser #1300
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Contributor
Author
There was a problem hiding this comment. These tests passed intermittently as they were when I was running them locally, extending the timeout made them less flaky |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "extends": "./tsconfig.json", | ||
| "exclude": [ | ||
| "src/pages/**", | ||
| "**/storyArgs.ts", | ||
| "src/**/*.stories.ts", | ||
| "src/**/*.stories.tsx", | ||
| "src/react-components/**", | ||
| "src/utils/_storybook/**" | ||
| ] | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { fileURLToPath } from 'node:url'; | ||
| import { defineConfig } from 'vitest/config'; | ||
| import { playwright } from '@vitest/browser-playwright'; | ||
|
|
||
| const silencedLogs = ['Lit is in dev mode.', 'Multiple versions of Lit loaded.']; | ||
|
|
||
| // Pre-existing unhandled rejections that wtr ignored, which we can now see and are silencing until resolved. | ||
|
Contributor
Author
There was a problem hiding this comment. We can add a follow-up issue to address these |
||
| const ignoredUnhandledErrors = [ | ||
| 'is not a valid preset', // image-card | ||
| 'Could not get icon named', // icon | ||
| 'Table must have an accessible name', // table | ||
| 'Axe is already running', // coach-mark | ||
| ]; | ||
|
|
||
| // Stub unused web-test-runner-commands so @open-wc/testing's static import of it doesn't break the tests | ||
| const testRunnerCommandsStub = fileURLToPath( | ||
| new URL('./vitest.stubs/web-test-runner-commands.ts', import.meta.url) | ||
| ); | ||
|
|
||
| export default defineConfig({ | ||
| server: { | ||
| // Icons load via dynamic import, by pre-transforming them, they are available immediately and don't cause random test timeouts. | ||
| warmup: { | ||
| clientFiles: ['./src/styles/icons/*.ts'], | ||
| }, | ||
| }, | ||
| resolve: { | ||
| alias: { | ||
| '@web/test-runner-commands': testRunnerCommandsStub, | ||
| }, | ||
| }, | ||
| test: { | ||
| include: ['src/**/*.test.ts'], | ||
| globals: true, | ||
| setupFiles: ['./vitest.setup.ts'], | ||
| onConsoleLog(log) { | ||
| if (silencedLogs.some((l) => log.includes(l))) return false; | ||
| }, | ||
| onUnhandledError(error) { | ||
| if (ignoredUnhandledErrors.some((m) => error.message?.includes(m))) return false; | ||
| }, | ||
| coverage: { | ||
| // istanbul is the only provider that supports coverage while running against multiple browsers. | ||
| provider: 'istanbul', | ||
| include: ['src/**/*.ts'], | ||
| exclude: [ | ||
| 'src/**/*.test.ts', | ||
| 'src/test/**', | ||
| 'src/**/*.stories.*', | ||
| 'src/**/storyArgs.ts', | ||
| 'src/styles/**', | ||
| 'src/react-components/**', | ||
| 'src/pages/**', | ||
| '**/*.css.ts', | ||
| '**/*.tsx', | ||
| 'src/utils/_storybook/**', | ||
| ], | ||
| thresholds: { | ||
| statements: 94, | ||
| branches: 85, | ||
| functions: 96, | ||
| lines: 94, | ||
| }, | ||
| }, | ||
| browser: { | ||
| enabled: true, | ||
| headless: true, | ||
| provider: playwright(), | ||
| screenshotFailures: false, | ||
| viewport: { width: 1280, height: 720 }, | ||
|
Contributor
Author
There was a problem hiding this comment. Match wtr's full-page size, Vitest iframe default is 414x896 |
||
| instances: [{ browser: 'chromium' }, { browser: 'firefox' }, { browser: 'webkit' }], | ||
| }, | ||
| }, | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| // Polyfill for custom-element definitions. | ||
| import '@webcomponents/scoped-custom-element-registry'; | ||
|
|
||
| // Register every Pharos component under the `test-` prefix | ||
| import './src/test/initComponents'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| // Stub for `@web/test-runner-commands` needed under Vitest browser mode. | ||
| // | ||
| // `@open-wc/semantic-dom-diff` (pulled in transitively by `@open-wc/testing`'s | ||
| // `expect`) statically imports `@web/test-runner-commands`, which itself imports | ||
| // a wtr-only websocket module (`__web-dev-server__web-socket.js`) that does not | ||
| // exist under Vite — breaking the whole `@open-wc/testing` import chain even | ||
| // though our tests never uses snapshot/dom-diff/command assertions. | ||
| // | ||
| // These exports mirror `@web/test-runner-commands` so the import resolves; each | ||
| // throws only if actually invoked. Aliased in `vitest.config.ts` so Vite's | ||
| // dep optimizer (which pre-bundles `@open-wc/testing`) picks it up. | ||
|
|
||
| const unavailable = | ||
| (name: string) => | ||
| (..._args: unknown[]): never => { | ||
| throw new Error(`@web/test-runner-commands.${name} is not available under Vitest browser mode`); | ||
| }; | ||
|
|
||
| export const executeServerCommand = unavailable('executeServerCommand'); | ||
| export const setViewport = unavailable('setViewport'); | ||
| export const emulateMedia = unavailable('emulateMedia'); | ||
| export const setUserAgent = unavailable('setUserAgent'); | ||
| export const sendKeys = unavailable('sendKeys'); | ||
| export const selectOption = unavailable('selectOption'); | ||
| export const sendMouse = unavailable('sendMouse'); | ||
| export const resetMouse = unavailable('resetMouse'); | ||
| export const a11ySnapshot = unavailable('a11ySnapshot'); | ||
| export const writeFile = unavailable('writeFile'); | ||
| export const readFile = unavailable('readFile'); | ||
| export const removeFile = unavailable('removeFile'); | ||
| export const findAccessibilityNode = unavailable('findAccessibilityNode'); | ||
| export const getSnapshotConfig = unavailable('getSnapshotConfig'); | ||
| export const getSnapshots = unavailable('getSnapshots'); | ||
| export const getSnapshot = unavailable('getSnapshot'); | ||
| export const saveSnapshot = unavailable('saveSnapshot'); | ||
| export const removeSnapshot = unavailable('removeSnapshot'); | ||
| export const compareSnapshot = unavailable('compareSnapshot'); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Because of the difference in how vitest compiles the component for testing, there were some whitespace changes, which resulted in errors like this
I just added
.trim()where this was happening