Vitest execution in a browser page

[holtwick]

Clear and concise description of the problem

Currently, vitest is executing test in the classic way on the node.js engine. I would like to execute my (non UI) vitest also on real browsers in their environment.

The benefit is to test for granular differences in different browsers like missing features or APIs. For example IndexedDB or Crypto related test.

Suggested solution

Reuse vitest environment to allow test execution in a web page. vite should be able to do the necessary updates quickly. Just provide a simple output like the one we get with the --ui option.

There is no need for automation regarding launching browsers etc. this could be achieved by integrating calls to the web pages by Cypress, Puppeteer, Playwright etc. if required.

Alternative

Cypress, Playwright, etc. provide their own test environment and focus on user interfaces.

Additional context

I made a tiny implementation for my own purposes: https://github.com/holtwick/zeed/blob/master/demos/tests/src/jest.ts

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sheremet-va]

Vitest is designed to run only inside Node. That's why we have vite-node. For example, mocking is relying on it.

Our general recommendation is to use Cypress for UI testing.

[holtwick]

I see. Yeah, it is probably out of scope.

[larsthorup]

@holtwick If I understand you correctly, mocha-vite-puppeteer might give you what you want, as it runs code and tests inside Puppeteer, instead of inside Node. mocha-vite-puppeteer is powered by Vite and should be just as fast as vitest. You can find a somewhat realistic demo project using mocha-vite-puppeteer here: https://github.com/larsthorup/react-redux-typescript-vite-sandbox

[holtwick]

I guess this comes close to what I intended: #891

I created a kind of runtime to be loaded before running a regular behavioral test. Maybe this gist gives an idea of it: https://gist.github.com/holtwick/ec4219363808a0d066ef02fd6c405077

[AriPerkkio]

Now that #891 is on-going, I think this issue could be re-opened for discussion related to topic.

How should vitest handle coverage when tests are running in the browser? Currently vitest is using nodejs's V8 API + c8. In browsers there are similar API's. For example Puppeteer seems to be utilizing Chromium's Profiler:

• https://github.com/puppeteer/puppeteer/blob/8ff9d598bf4afd10cbc61ca9579b7bd38edb8026/src/common/Coverage.ts#L237-L241
• https://chromedevtools.github.io/devtools-protocol/tot/Profiler/

This would mean that coverage collection would be limited to Chromium based browsers only. Using something like nyc would be easy but not ideal now that c8 has been chosen on the nodejs side.

[sheremet-va]

Introduced browser testing is very limited at the moment, and doesn't support many features (including module mocking and snapshots). And not even released :) Not sure if we should discuss it here, or open a proper roadmap issue

[bichikim]

You might want karma-vite

[jzombie]

I'm interested when browser testing becomes more generally available.

My use case is for writing isomorphic JavaScript modules that can run on Node.js as well as in the browser.

I'm currently using Karma + Jasmine to test in browsers, while just using Jasmine for Node, which gives me the benefit of only having to write the tests once, but there's still a bit of overhead that I'd like to simplify.

[lmiller1990]

If anyone is using Vite and wants browser tests, Cypress Component Testing works with your existing Vite config out of the box. https://docs.cypress.io/guides/component-testing/overview

It's aimed at component tests and UI development, but this might be useful for people in the "I am using Vite, but I want to run some tests in a browser, too".