Error in Browser mode x Node APIs #6293
Comments
|
It looks like a duplicate of #5015 Currently it doesn't look possible to setup workspace project level config from Node API like |
|
Looking at the reproduction, I just noticed you have vite config already, so I'm wondering if there's any reason you're disabling const viteConfig = {
// configFile: false,
// envFile: false,
// plugins: [vue()],
test: {
// root: resolve(__dirname, '../'),
watch: false,
browser: {
enabled: true,
provider: 'playwright',
name: 'chromium',
headless: true,
}
}
}; |
|
@hi-ogawa thanks for the informaiton. The background is I'm integrating vitest into @teambit in which there is no vite config file to resolve. The vite.config.ts in this reproduction is just for comparison between CLI command and Node API calls. It would be great if we can support it for browser server in any way. |
Can you elaborate more on this? For example, is it the assumption that users might not be even using Vite for their app/lib but want to use Vitest for testing? |
|
Sure. In short, Bit is a component-based workspace. In Bit, every component is based on a certain dev env. And every dev env (such as React env, Vue env, Angular env, etc) consists of multiple separate dev services like compiler, linter, formatter, tester, docs preview. By design, the dev env author can pick up any tools from the open source community and integrate them into the env. e.g. for this vue env: https://bit.cloud/bitdev/vue/envs/vue-modern-env it picks up Vite as the docs preview and Vitest as the tester. You can also replace Vite into webpack as the docs preview but still use Vitest as the tester if you want. So the answer to your question is yes. All the dev services are called via Node APIs in Bit. And the file structure of a workspace is slightly different from a normal workspace. So for flexibility, we usually prefer Node API calls and inline configs rather than CLI command and config files. That also means there is no vite.config.ts in each component dir. They are all configured in the corresponding dev env via inline config. If you are interested, this is the source code that we currently resolve config for Vitest dev service: Let me know if you need any other information. |
Thanks, this context is useful to know 👍 For this use case, you'll need a way to pass Not sure, but maybe we can support something like inline // run.js
import { startVitest, defineWorkspace } from 'vitest/node';
import vue from '@vitejs/plugin-vue';
await startVitest('test', undefined, undefined, {
test: {
// not supported
workspace: defineWorkspace([
{
plugins: [vue()],
test: {
browser: {
enabled: true,
provider: 'playwright',
name: 'chromium',
}
}
}
])
}
});Currently //// run.js
import { startVitest } from 'vitest/node';
import vue from '@vitejs/plugin-vue';
await startVitest('test', undefined, undefined, {
test: {
workspace: "workspace.js"
}
});
//// workspace.js
import { defineWorkspace } from 'vitest/node';
import vue from '@vitejs/plugin-vue';
export default defineWorkspace([
{
plugins: [vue()],
test: {
browser: {
enabled: true,
provider: 'playwright',
name: 'chromium',
}
}
}
])Or instead of going through |
|
@Jinjiang One question. What is this vitest config appearing under |
|
I think the answer to that might be yes, but probably it gets merged as inline config instead of used as |
|
@hi-ogawa Thanks so much for the explanation. Passing the For the The extra config file is not in the root of the component dir. I understand in such a case |
@Jinjiang I was thinking of doing |
I just want to say that it seems very counterintuitive to me. The config file with |
|
But I think it would make sense if we applied |
That might be okay, but the concern is same as a previous issue since that would cause |
Sure. I've tried it. I thought it was just an equivalent change (from load and merge to configFile) but it worked after that. I think we can take this for now. Thanks a lot. |
I personally feel the most confusing part to me is, with the same config, a file works and an inline object doesn't. The other approaches are also good to me. Anyway, good to know the complication behind it through this issue. From the surface I just saw a new Thanks. |
sheremet-va
added
p2-to-be-discussed
Describe the bug
It got error when run Vitest via Node APIs with config like this:
Error log:
Reproduction
https://github.com/Jinjiang/reproductions/tree/try-vitest-browser-mode-20240807
System Info
System: OS: macOS 15.0 CPU: (8) arm64 Apple M1 Memory: 53.38 MB / 8.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.11.1 - ~/.local/share/mise/installs/node/20/bin/node Yarn: 1.22.18 - ~/.yarn/bin/yarn npm: 10.2.4 - ~/.local/share/mise/installs/node/20/bin/npm pnpm: 9.6.0 - ~/Library/pnpm/pnpm bun: 1.0.29 - ~/.local/share/mise/installs/bun/latest/bin/bun Browsers: Safari: 18.0 npmPackages: @vitejs/plugin-vue: ^5.1.2 => 5.1.2 @vitest/browser: ^2.0.5 => 2.0.5 vite: ^5.3.5 => 5.3.5 vitest: ^2.0.5 => 2.0.5Used Package Manager
pnpm
Validations
The text was updated successfully, but these errors were encountered: