Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(browser): isolate browser tests #3584

Closed
wants to merge 61 commits into from

Conversation

userquin
Copy link
Member

@userquin userquin commented Jun 15, 2023

This PR isolates tests creating an iframe per test file.

On my local tests, I need to start the tests a few times to get it working, I have added vue and react examples and vue should also work (this is one we need to revert changes).

DRAFT: we'll need to revert some changes in existing tests and cleanup some modules.

userquin and others added 30 commits April 13, 2023 12:59
chore: use settimeout promise in vue example async test
# Conflicts:
#	packages/ui/client/auto-imports.d.ts
#	packages/vitest/src/node/pools/browser.ts
#	pnpm-lock.yaml
@netlify
Copy link

netlify bot commented Jul 5, 2023

Deploy Preview for fastidious-cascaron-4ded94 canceled.

Name Link
🔨 Latest commit 9429661
🔍 Latest deploy log https://app.netlify.com/sites/fastidious-cascaron-4ded94/deploys/652f04002f4a9f0008ae9bfd

@sheremet-va
Copy link
Member

@userquin can you resolve conflicts last time?

await flushPromises() // start loading, so vitest started loading
await vi.dynamicImportSettled()
// await flushPromises() // start loading, so vitest started loading
// await vi.dynamicImportSettled()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dynamicImportSettled is supported in browser tests

*
* @default false
*/
enableUI?: boolean
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the use case when you run it in the browser without a UI is not so popular. @vitest/browser is primarily to allow component testing. examples/browser is just a test to make sure everything works seamlessly

@userquin
Copy link
Member Author

@userquin can you resolve conflicts last time?

Sure

# Conflicts:
#	packages/browser/package.json
#	packages/browser/src/client/main.ts
#	packages/browser/src/client/vite.config.ts
#	packages/browser/src/node/index.ts
#	packages/vitest/src/node/core.ts
#	packages/vitest/src/node/pools/browser.ts
#	pnpm-lock.yaml
@jfgreffier
Copy link
Contributor

Closes #3154

@shairez
Copy link

shairez commented Jan 20, 2024

Looks like an awesome feature!
Is there anything blocking it other than fixing the conflicts?

@DanWebb
Copy link

DanWebb commented Feb 17, 2024

Is the browser UI tab still a planned addition after #5036? 🤞🙏

@grumd
Copy link

grumd commented May 7, 2024

Seems like this PR also fixes another issue.
By default iframe width is 300px, and currently vitest does not override it with 100vw.
So all the tests you'll run are limited to 300px width instead of the full browser viewport because they are run in #vitest-tester > iframe.
I had to resort to window.parent.document hacks in my vitest.setup.ts to make it work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

10 participants