browser mode: component is not shown in browser #5370

nsulzberger · 2024-03-11T14:11:08Z

nsulzberger
Mar 11, 2024

I am using vitest in browser mode and would like to see my rendered component in the browser.
I am adding my component to the test iframe with:

const container = document.createElement("div");
...
 document.body.appendChild(container);

When I look at the document of the browser I can see the following structure:

<body>
    <iframe id="vitest-ui" src=""></iframe>
    <div id="vitest-tester">
	<iframe loading="eager" src="<path to test 1>">
	</iframe><iframe loading="eager" src="<path to test 2>"></iframe>
	<iframe loading="eager" src="<path to test 3>"></iframe>
	</div>
</body>

The iframe with id "vitest-ui" has a height of 100vh, so the iFrames with the test results are actually never displayed. When I set it to 0, I can see my rendered component in one of the iframes.

I was watching this video tutorial, and there you can see the rendered content:
https://www.youtube.com/watch?v=d5S7Dy0rpQo
Is this not supported anymore after the isolation with iframes has been added?

my vitest config:

{
  setupFiles: ["./tests/vitest/setup.ts"],
  include: ["./tests/vitest/**/*.spec.ts"],
  reporters: isCI ? [["junit", {
    suite: "vitest",
    useBrowserName: false
  }]] : ["default", "html"],
  outputFile: {
    junit: "./vitest-report.xml"
  },
  browser: {
    enabled: true,
    headless: false,
    name: "chromium",
    provider: "playwright",
    providerOptions: {
      launch: {
        args: ["--ignore-certificate-errors"]
      }
    },
    fileParallelism: false,
    isolate: false
  }

Answered by userquin

Mar 11, 2024

Are you referring to the comment here?

Yes.

Is the UI only a planned feature, and has never been implemented in a release? Or can I use an older release?

To show the test UI we need to include the logic in Vitest UI, browser feature only includes the logic to run the test in the browser; rn there is no Vitest version with the test UI tab, only that PR includes it, and yes, in a future the tab should be there

View full answer

userquin · 2024-03-11T14:14:29Z

userquin
Mar 11, 2024
Collaborator

The UI part still not included

4 replies

nsulzberger Mar 11, 2024
Author

Thanks a lot for your fast reply! I am sorry but I am very new to vitest.
Are you referring to the comment here? #3584 (comment). Is the UI only a planned feature, and has never been implemented in a release? Or can I use an older release?

userquin Mar 11, 2024
Collaborator

Are you referring to the comment here?

Yes.

Is the UI only a planned feature, and has never been implemented in a release? Or can I use an older release?

To show the test UI we need to include the logic in Vitest UI, browser feature only includes the logic to run the test in the browser; rn there is no Vitest version with the test UI tab, only that PR includes it, and yes, in a future the tab should be there

Answer selected by nsulzberger

nsulzberger Mar 12, 2024
Author

cool, great to hear that it will come at some point in the future!! What is missing that it cannot be merged yet?

userquin Mar 12, 2024
Collaborator

The PR is too old, too many changes in the core.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

browser mode: component is not shown in browser #5370

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

browser mode: component is not shown in browser #5370

nsulzberger Mar 11, 2024

Replies: 1 comment · 4 replies

userquin Mar 11, 2024 Collaborator

nsulzberger Mar 11, 2024 Author

userquin Mar 11, 2024 Collaborator

nsulzberger Mar 12, 2024 Author

userquin Mar 12, 2024 Collaborator

nsulzberger
Mar 11, 2024

Replies: 1 comment 4 replies

userquin
Mar 11, 2024
Collaborator

nsulzberger Mar 11, 2024
Author

userquin Mar 11, 2024
Collaborator

nsulzberger Mar 12, 2024
Author

userquin Mar 12, 2024
Collaborator