test(vapor): use browser mode instead of pupeteer to run tests #13934
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing touches🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
| test('vapor', { timeout: E2E_TIMEOUT }, async () => { | ||
| createVaporApp(App).mount('#app') | ||
|
|
||
| expect(css('.main')).not.toBeVisible() |
There was a problem hiding this comment.
Technically it's always better to use expect.element(locator).not.toBeVisible(), but prettier changes this 1 line into 3, so I kept more error prone version for esthetic reasons. I wonder if we can improve this on Vitest side.
| .use(sirv(path.resolve(import.meta.dirname, '../dist'))) | ||
| .listen(port) | ||
| process.on('SIGTERM', () => server && server.close()) | ||
| test('vapor', { timeout: E2E_TIMEOUT }, async () => { |
There was a problem hiding this comment.
Putting timeout here makes prettier format the test body with indentation of 2 instead of 4, although maybe it's even better to move the timeout to the config.
| }, | ||
| { | ||
| extends: true, | ||
| extends: './packages-private/vapor-e2e-test/vite.config.ts', |
There was a problem hiding this comment.
The test config reuses the Vite config from a private repo instead of the main one (so, aliases and defines are not actually inherited, but tests seem to run ok...)
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/compiler-vapor
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/runtime-vapor
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
|
I've actually been planning to switch e2e tests to vitest browser mode too, but I haven't done it yet since vitest browser mode is still experimental. I have a question: after switching to vitest browser mode, does the e2e test execution time increase or decrease? If the difference isn't too significant, I think this PR is worthwhile. |
The time is unpredictable with the previous approach for me, the first time it's ~2s, the second time ~1,5s. The browser mode runs for 2s (the MVC test is always 1,5s unlike with pupeteer where it's either 1,5s or 700ms). I think it might be because the previous setup was modifying the DOM directly (by setting |
|
@sheremet-va |
This PR rewrites the tests for Vue Vapor mode to use Vitest Browser Mode. The logic of the test stayed the same, although it maybe also good to rewrite some of it or split it into separate tests. There are no big noticeable changes in speed.
Happy to get any feedback.
If there is desire, I can also update older e2e tests.
Running tests with
--browser.headless=falsealso shows Vitest UI: