diff --git a/packages/vitest/src/create/browser/creator.ts b/packages/vitest/src/create/browser/creator.ts index d052ebc957cd..51eee017d411 100644 --- a/packages/vitest/src/create/browser/creator.ts +++ b/packages/vitest/src/create/browser/creator.ts @@ -104,6 +104,11 @@ function getFramework(): prompt.Choice[] { value: 'marko', description: '"A declarative, HTML-based language that makes building web apps fun"', }, + { + title: 'qwik', + value: 'qwik', + description: '"Instantly interactive web apps at scale"', + }, ] } @@ -125,6 +130,8 @@ function getFrameworkTestPackage(framework: string) { return '@solidjs/testing-library' case 'marko': return '@marko/testing-library' + case 'qwik': + return 'vitest-browser-qwik' } throw new Error(`Unsupported framework: ${framework}`) } @@ -143,6 +150,8 @@ function getFrameworkPluginPackage(framework: string) { return 'vite-plugin-solid' case 'marko': return '@marko/vite' + case 'qwik': + return '@builder.io/qwik/optimizer' } return null } @@ -224,6 +233,9 @@ function getPossibleFramework(dependencies: Record) { if (dependencies.marko) { return 'marko' } + if (dependencies['@builder.io/qwik'] || dependencies['@qwik.dev/core']) { + return 'qwik' + } return 'vanilla' } @@ -257,6 +269,17 @@ function fail() { process.exitCode = 1 } +function getFrameworkImportInfo(framework: string) { + switch (framework) { + case 'svelte': + return { importName: 'svelte', isNamedExport: true } + case 'qwik': + return { importName: 'qwikVite', isNamedExport: true } + default: + return { importName: framework, isNamedExport: false } + } +} + async function generateFrameworkConfigFile(options: { configPath: string framework: string @@ -264,15 +287,18 @@ async function generateFrameworkConfigFile(options: { provider: string browsers: string[] }) { - const frameworkImport = options.framework === 'svelte' - ? `import { svelte } from '${options.frameworkPlugin}'` - : `import ${options.framework} from '${options.frameworkPlugin}'` + const { importName, isNamedExport } = getFrameworkImportInfo(options.framework) + + const frameworkImport = isNamedExport + ? `import { ${importName} } from '${options.frameworkPlugin}'` + : `import ${importName} from '${options.frameworkPlugin}'` + const configContent = [ `import { defineConfig } from 'vitest/config'`, options.frameworkPlugin ? frameworkImport : null, ``, 'export default defineConfig({', - options.frameworkPlugin ? ` plugins: [${options.framework}()],` : null, + options.frameworkPlugin ? ` plugins: [${importName}()],` : null, ` test: {`, ` browser: {`, ` enabled: true,`, diff --git a/packages/vitest/src/create/browser/examples.ts b/packages/vitest/src/create/browser/examples.ts index 98dd141ec198..57db8a14fc7d 100644 --- a/packages/vitest/src/create/browser/examples.ts +++ b/packages/vitest/src/create/browser/examples.ts @@ -191,6 +191,42 @@ test('renders name', async () => { `, } +const qwikExample = { + name: 'HelloWorld.jsx', + js: ` +import { component$ } from '@builder.io/qwik' + +export default component$(({ name }) => { + return ( +
+

Hello {name}!

+
+ ) +}) +`, + ts: ` +import { component$ } from '@builder.io/qwik' + +export default component$(({ name }: { name: string }) => { + return ( +
+

Hello {name}!

+
+ ) +}) +`, + test: ` +import { expect, test } from 'vitest' +import { render } from 'vitest-browser-qwik' +import HelloWorld from './HelloWorld.tsx' + +test('renders name', async () => { + const { getByText } = render() + await expect.element(getByText('Hello Vitest!')).toBeInTheDocument() +}) +`, +} + const vanillaExample = { name: 'HelloWorld.js', js: ` @@ -251,6 +287,8 @@ function getExampleTest(framework: string) { return litExample case 'marko': return markoExample + case 'qwik': + return qwikExample default: return vanillaExample }