[Feature] Component testing: use vite dev server mode instead of production mode #14748

stevez · 2022-06-09T13:46:13Z

When I run component tests, I found first uses rollup to bundle the files and then run the test, I wonder if we can use vite dev server mode to run the component tests, then we have many benefits from vite:

watch mode
faster start up,
support HMR mode
faster feedback

pavelfeldman · 2022-06-09T15:26:26Z

dev server actually makes things much, much slower. each test is making an endpoint request and with dev mode each request takes 200ms. so we deliberately made a decision to go prod mode. Once you have 100 tests, 200ms per request becomes a 20 seconds of delay non-starter.

AlexanderMykulych · 2022-06-10T07:19:29Z

This feature is excellent, especially for debugging.
My project's build takes 30-40 seconds, and if I change something and want to debug my test, I need to wait for that time.
Maybe it could be some env variable that turns on that behavior? 🤔

Another addition that I thought. It would be great to combine vite serve + some watch mode or test restart. I changed my code, and one test or some tests restarted immediately.

stevez · 2022-06-10T15:30:18Z

I agree with @AlexanderMykulych, in my case I found it took me about 20 sec to finish the prod build. If we don't use dev server mode, then how are we going to support watch mode, HMR and TDD, and getting faster feedback?

JCMais · 2022-08-04T19:47:10Z

Same feature request. In my case debugging errors with React in the production build is painfully slow.

sand4rt · 2022-08-23T16:49:42Z

Related to: #21960

cameronbraid · 2022-10-21T03:46:14Z

My current approach is to use vite server, and create an index.html and index.tsx file for my tests, which is a bit of manual work. However it gives me a very fast feedback loop as I can run a component test almost without delay by pointing playwright at the vite server. When using playwright component testing, I have to wait for the full prod build which as mentioned above is very slow, though perfect for CI as the tests run the fastest they can - this leaves the dev experience lacking.

ahnpnl · 2022-11-17T22:03:57Z

Hi @cameronbraid , do you have an example how to set it up?

cameronbraid · 2022-11-17T23:41:20Z

Hi @cameronbraid , do you have an example how to set it up?

Its just using normal vite running in dev mode and using playwright to drive the browser to the vite pages

Just create a new folder for each test, with the following as an example

src/test-a/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="root" style="height:100%"></div>
    <script type="module" src="./index.tsx"></script>
  </body>
</html>

src/test-a/index.tsx

import * as React from "react"
import { createRoot } from "react-dom/client"
const TestComponent = () => {
  return <div data-testid='TestComponent'>TestComponent</div>
}
createRoot(document.getElementById("root")).render(<TestComponent/>)

src/test-a/test-Playwright.tsx

import { expect, Request, Route, test } from "@playwright/test"
import { viteUrl } from "src/viteUrl"
test.describe("TestComponent", () => {
  test("renders", async ({ page }) => {
    await page.goto(viteUrl(`/src/test-a/`))
    await expect(page.locator("[data-testid=TestComponent]").toContainText("TestComponent"))
  })
})

src/viteUrl.ts

export function viteUrl(path: string) {
  return (process.env.VITE_URL || "http://localhost:3002") + path
}

As I said above it is a bit of manual work

Cameron

mikirejf · 2023-04-12T13:08:03Z

Would love to have a faster option that doesn't require a full prod build. 🙏

boan-anbo · 2023-12-02T09:24:38Z

Any plans to improve the iteration rate?

Right now, we have to wait for tens of seconds of vite production build time for each small change to the source code, for watch or --ui mode.

It makes TDD super painful for component testing under playwright. We have to stick to Vitest + RTL for component testing.

sand4rt · 2023-12-08T13:46:23Z

Vite has plans to improve production builds by creating a faster, Rust-based replacement for the Rollup bundler. This will likely improve iteration speed/performance significantly. See @yyx990803's recent keynote for more info: https://youtu.be/hrdwQHoAp0M?si=DwWDdMWh7_zz51fv&t=501

pavelfeldman · 2024-01-19T20:02:06Z

What would be the preferred shape of a fix for this?

(a) Watch mode

# blocking process
npm run test -- --watch

it would build the app for test, start the dev server with it
every time component or test is changed, all the affected tests are executed

(b) Dev server

# blocking process
npm run test -- --dev

it would build the app for test, start the dev server with it
every time user runs npm run test tests run against the dev server

(c) Something else?

spuxx1701 · 2024-01-22T10:47:33Z

Out of curiosity - will this change make the following scenarios possible:

Running playwright using a user-defined (test-focused) set of vite's environment variables (or even a custom mode)
Running playwright tests on an SSR app where outgoing requests from the server-side part can be caught and mocked with tools like msw

I've been looking for ways to test a SvelteKit app E2E with playwright, but I need ways to catch and mock outgoing requests from the server-side part. Haven't found a solution so far and I've wondered whether playwright using vite's dev server might indeed give me a way to achieve this.

sand4rt · 2024-01-23T21:45:31Z

@spuxx1701 there is a separate issue to track this: #19399.

I've been looking for ways to test a SvelteKit app E2E with playwright, but I need ways to catch and mock outgoing requests from the server-side part.

See: #19399 (comment)

spuxx1701 · 2024-01-23T21:57:34Z

Thanks for giving me pointers @sand4rt !

sand4rt · 2024-01-23T23:29:29Z

What would be the preferred shape of a fix for this?

#21960 is what i was looking for and #23372 if i have to use VSCode. Would that be the same as option A?

This approach enables me to keep the browser open alongside the editor, allowing for a more efficient workflow as changes to the component or test are automatically reflected in the browser without the necessity of executing npm run test repeatedly. I haven't had much time to look into this, but it seems like there are still some performance gains to be made. Especially for larger projects (see: #14748 (comment)). Getting as close as possible to the snappy Vite dev server/partial build/HMR experience would be great as this also allows component preview/development in isolation.

Not sure if I understand the pro's and cons of option B correctly. It seems that i still have to execute npm run test manually every time i modify the component or test?

pavelfeldman · 2024-01-25T19:48:26Z

Not sure if I understand the pro's and cons of option B correctly. It seems that i still have to execute npm run test manually every time i modify the component or test?

When assessing the VS Code workflow, think about this feature as of two separate features that result in the "watch" behavior:

Dev server that keeps component gallery up-to-date live. After (before, or during) your test run, editing component will result in component changing live in the "show browser" window. Dev server must outlive the test run, i.e. must outlive the playwright test session.
Watch re-run the tests upon certain event, this is the watch feature in VS Code that we have not implemented yet. It is the same for e2e and for components module the dependency tree.

(1) is already implemented on ToT:

# start the server
npx pw-react dev-server

Then you just run the tests (console or run decoration in VS Code) and they will use the server.

AlexanderMykulych · 2024-03-16T10:00:09Z

Hi there, I was wondering if there are any updates or new developments regarding this issue?
Thank you for your continued work on this 🙌

stevez changed the title ~~[Component testing]: use vite dev server mode instead of production mode~~ [Feature] Component testing: use vite dev server mode instead of production mode Jun 9, 2022

pavelfeldman added triaging feature-components labels Jun 9, 2022

pavelfeldman added v1.24 and removed triaging labels Jun 11, 2022

pavelfeldman self-assigned this Jun 11, 2022

dgozman added v1.25 and removed v1.24 labels Jul 1, 2022

mxschmitt removed the v1.25 label Jul 25, 2022

sand4rt mentioned this issue Dec 12, 2023

[Feature] Migrate to Vite 5 #28607

Closed

sand4rt mentioned this issue Jan 19, 2024

Recommend Playwright rather than Cypress vuejs/docs#2639

Open

sand4rt mentioned this issue Jan 17, 2024

[Bug] Watch mode doesn't seem to work thenbe/neotest-playwright#18

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature] Component testing: use vite dev server mode instead of production mode #14748

[Feature] Component testing: use vite dev server mode instead of production mode #14748

stevez commented Jun 9, 2022

pavelfeldman commented Jun 9, 2022

AlexanderMykulych commented Jun 10, 2022

stevez commented Jun 10, 2022

JCMais commented Aug 4, 2022

sand4rt commented Aug 23, 2022 •

edited

Loading

cameronbraid commented Oct 21, 2022 •

edited

Loading

ahnpnl commented Nov 17, 2022

cameronbraid commented Nov 17, 2022 •

edited

Loading

mikirejf commented Apr 12, 2023

boan-anbo commented Dec 2, 2023 •

edited

Loading

sand4rt commented Dec 8, 2023

pavelfeldman commented Jan 19, 2024 •

edited

Loading

spuxx1701 commented Jan 22, 2024 •

edited

Loading

sand4rt commented Jan 23, 2024

spuxx1701 commented Jan 23, 2024

sand4rt commented Jan 23, 2024 •

edited

Loading

pavelfeldman commented Jan 25, 2024

AlexanderMykulych commented Mar 16, 2024

[Feature] Component testing: use vite dev server mode instead of production mode #14748

[Feature] Component testing: use vite dev server mode instead of production mode #14748

Comments

stevez commented Jun 9, 2022

pavelfeldman commented Jun 9, 2022

AlexanderMykulych commented Jun 10, 2022

stevez commented Jun 10, 2022

JCMais commented Aug 4, 2022

sand4rt commented Aug 23, 2022 • edited Loading

cameronbraid commented Oct 21, 2022 • edited Loading

ahnpnl commented Nov 17, 2022

cameronbraid commented Nov 17, 2022 • edited Loading

mikirejf commented Apr 12, 2023

boan-anbo commented Dec 2, 2023 • edited Loading

sand4rt commented Dec 8, 2023

pavelfeldman commented Jan 19, 2024 • edited Loading

(a) Watch mode

(b) Dev server

(c) Something else?

spuxx1701 commented Jan 22, 2024 • edited Loading

sand4rt commented Jan 23, 2024

spuxx1701 commented Jan 23, 2024

sand4rt commented Jan 23, 2024 • edited Loading

pavelfeldman commented Jan 25, 2024

AlexanderMykulych commented Mar 16, 2024

sand4rt commented Aug 23, 2022 •

edited

Loading

cameronbraid commented Oct 21, 2022 •

edited

Loading

cameronbraid commented Nov 17, 2022 •

edited

Loading

boan-anbo commented Dec 2, 2023 •

edited

Loading

pavelfeldman commented Jan 19, 2024 •

edited

Loading

spuxx1701 commented Jan 22, 2024 •

edited

Loading

sand4rt commented Jan 23, 2024 •

edited

Loading