@stencil/vitest 1.13.3 → 1.14.0

package/dist/__tests__/wizard.spec.js

@@ -78,14 +78,6 @@ describe('wizard.generate.fileTemplates', () => {
         expect(content).not.toContain("import './my-button'");
         expect(content).toContain("describe('my-button'");
     });
-    it('passes subdirectory to templates', async () => {
-        const ctx = {
-            prompts: { text: vi.fn().mockResolvedValue('__tests__'), isCancel: noCancel },
-            config: { rootDir: tmpDir, fsNamespace: 'my-lib', outputTargets: [] },
-        };
-        const templates = await callFileTemplates(ctx);
-        expect(templates[0].subdirectory).toBe('__tests__');
-    });
     it('uses project-based templates when vitest.config.ts has a node project', async () => {
         writeFileSync(join(tmpDir, 'vitest.config.ts'), `export default {
   test: {
@@ -129,6 +121,29 @@ describe('wizard.generate.fileTemplates', () => {
         expect(templates).toHaveLength(1);
         expect(templates[0].selectedByDefault).toBe(false);
     });
+    it('includes a component import for a browser project using the unplugin plugin', async () => {
+        writeFileSync(join(tmpDir, 'vitest.config.ts'), `export default {
+  test: {
+    projects: [
+      {
+        plugins: [{}],
+        test: {
+          name: 'browser',
+          include: ['**/*.browser.spec.{ts,tsx}'],
+          browser: { enabled: true },
+        },
+      },
+    ],
+  },
+};\n`);
+        const ctx = {
+            prompts: { text: vi.fn().mockResolvedValue(''), isCancel: noCancel },
+            config: { rootDir: tmpDir, fsNamespace: 'my-lib', outputTargets: [] },
+        };
+        const templates = await callFileTemplates(ctx);
+        const content = templates[0].template('my-button');
+        expect(content).toContain("import './my-button'");
+    });
 });
 describe('wizard.init.run', () => {
     let tmpDir;
@@ -160,14 +175,15 @@ describe('wizard.init.run', () => {
         const configContent = readFileSync(join(tmpDir, 'vitest.config.ts'), 'utf8');
         expect(configContent).toContain("name: 'unit'");
     });
-    it('creates vitest.config.ts with stencilVitestPlugin for a node+plugin project', async () => {
+    it('creates vitest.config.ts with @stencil/unplugin for a node+plugin project', async () => {
         const ctx = makeInitCtx(tmpDir);
         ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
         ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('mock-doc').mockResolvedValueOnce('plugin');
         ctx.prompts.confirm.mockResolvedValueOnce(false);
         await wizard.init.run(ctx);
         const config = readFileSync(join(tmpDir, 'vitest.config.ts'), 'utf8');
-        expect(config).toContain('stencilVitestPlugin()');
+        expect(config).toContain("import { stencilVite } from '@stencil/unplugin';");
+        expect(config).toContain('stencilVite()');
         expect(config).toContain("name: 'unit'");
         expect(config).toContain("include: ['**/*.spec.{ts,tsx}']");
         expect(config).not.toContain('setupFiles');
@@ -182,7 +198,7 @@ describe('wizard.init.run', () => {
         ctx.prompts.confirm.mockResolvedValueOnce(false);
         await wizard.init.run(ctx);
         const config = readFileSync(join(tmpDir, 'vitest.config.ts'), 'utf8');
-        expect(config).not.toContain('stencilVitestPlugin');
+        expect(config).not.toContain('stencilVite');
         expect(config).toContain("setupFiles: ['./vitest-setup.ts']");
         expect(config).toContain("domEnvironment: 'happy-dom'");
     });
@@ -220,23 +236,52 @@ describe('wizard.init.run', () => {
         await wizard.init.run(ctx);
         expect(ctx.nypm.addDependency).toHaveBeenCalledWith(expect.arrayContaining(['vitest', 'jsdom']), expect.objectContaining({ dev: true }));
     });
-    it('installs playwright packages for a browser+playwright project', async () => {
+    it('installs playwright packages for a browser+playwright+full-build project', async () => {
         const ctx = makeInitCtx(tmpDir);
         ctx.prompts.text.mockResolvedValueOnce('browser').mockResolvedValueOnce('**/*.browser.spec.{ts,tsx}');
-        ctx.prompts.select.mockResolvedValueOnce('browser').mockResolvedValueOnce('playwright');
+        ctx.prompts.select
+            .mockResolvedValueOnce('browser')
+            .mockResolvedValueOnce('playwright')
+            .mockResolvedValueOnce('full-build');
         ctx.prompts.confirm.mockResolvedValueOnce(false);
         await wizard.init.run(ctx);
         expect(ctx.nypm.addDependency).toHaveBeenCalledWith(expect.arrayContaining(['vitest', '@vitest/browser', '@vitest/browser-playwright', 'playwright']), expect.objectContaining({ dev: true }));
+        expect(ctx.nypm.addDependency).not.toHaveBeenCalledWith(expect.arrayContaining(['@stencil/unplugin']), expect.anything());
     });
-    it('installs wdio packages for a browser+webdriverio project', async () => {
+    it('installs wdio packages for a browser+webdriverio+full-build project', async () => {
         const ctx = makeInitCtx(tmpDir);
         ctx.prompts.text.mockResolvedValueOnce('browser').mockResolvedValueOnce('**/*.browser.spec.{ts,tsx}');
-        ctx.prompts.select.mockResolvedValueOnce('browser').mockResolvedValueOnce('wdio');
+        ctx.prompts.select
+            .mockResolvedValueOnce('browser')
+            .mockResolvedValueOnce('wdio')
+            .mockResolvedValueOnce('full-build');
         ctx.prompts.confirm.mockResolvedValueOnce(false);
         await wizard.init.run(ctx);
         expect(ctx.nypm.addDependency).toHaveBeenCalledWith(expect.arrayContaining(['vitest', '@vitest/browser', '@vitest/browser-webdriverio']), expect.objectContaining({ dev: true }));
         expect(ctx.nypm.addDependency).not.toHaveBeenCalledWith(expect.arrayContaining(['playwright']), expect.anything());
     });
+    it('sets up a browser+plugin project with @stencil/unplugin - no build required', async () => {
+        const ctx = makeInitCtx(tmpDir);
+        ctx.prompts.text.mockResolvedValueOnce('browser').mockResolvedValueOnce('**/*.browser.spec.{ts,tsx}');
+        ctx.prompts.select
+            .mockResolvedValueOnce('browser')
+            .mockResolvedValueOnce('playwright')
+            .mockResolvedValueOnce('plugin');
+        ctx.prompts.confirm.mockResolvedValueOnce(false);
+        await wizard.init.run(ctx);
+        expect(ctx.nypm.addDependency).toHaveBeenCalledWith(expect.arrayContaining([
+            'vitest',
+            '@vitest/browser',
+            '@vitest/browser-playwright',
+            'playwright',
+            '@stencil/unplugin',
+        ]), expect.objectContaining({ dev: true }));
+        const config = readFileSync(join(tmpDir, 'vitest.config.ts'), 'utf8');
+        expect(config).toContain("import { stencilVite } from '@stencil/unplugin';");
+        expect(config).toContain('stencilVite()');
+        expect(config).not.toContain('setupFiles');
+        expect(existsSync(join(tmpDir, 'vitest-setup.ts'))).toBe(false);
+    });
     it('writes test and test:<name> scripts to package.json', async () => {
         const ctx = makeInitCtx(tmpDir);
         ctx.prompts.text.mockResolvedValueOnce('unit').mockResolvedValueOnce('**/*.spec.{ts,tsx}');
@@ -280,8 +325,7 @@ export class MyButton { render() { return <button />; } }
         const ctx = makeInitCtx(tmpDir, [], true);
         ctx.prompts.text
             .mockResolvedValueOnce('unit') // project name
-            .mockResolvedValueOnce('**/*.spec.{ts,tsx}') // pattern
-            .mockResolvedValueOnce(''); // subdirectory (empty = co-locate)
+            .mockResolvedValueOnce('**/*.spec.{ts,tsx}'); // pattern
         ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('mock-doc').mockResolvedValueOnce('plugin');
         ctx.prompts.confirm.mockResolvedValueOnce(false);
         await wizard.init.run(ctx);
@@ -291,24 +335,6 @@ export class MyButton { render() { return <button />; } }
         expect(spec).toContain("describe('my-button'");
         expect(spec).toContain('<my-button />');
     });
-    it('generates example spec files into a subdirectory for new projects', async () => {
-        const componentDir = join(tmpDir, 'src', 'components', 'my-button');
-        mkdirSync(componentDir, { recursive: true });
-        writeFileSync(join(componentDir, 'my-button.tsx'), `import { Component, h } from '@stencil/core';
-@Component({ tag: 'my-button', shadow: true })
-export class MyButton { render() { return <button />; } }
-`);
-        const ctx = makeInitCtx(tmpDir, [], true);
-        ctx.prompts.text
-            .mockResolvedValueOnce('unit')
-            .mockResolvedValueOnce('**/*.spec.{ts,tsx}')
-            .mockResolvedValueOnce('__tests__');
-        ctx.prompts.select.mockResolvedValueOnce('node').mockResolvedValueOnce('mock-doc').mockResolvedValueOnce('plugin');
-        ctx.prompts.confirm.mockResolvedValueOnce(false);
-        await wizard.init.run(ctx);
-        const specFile = join(componentDir, '__tests__', 'my-button.spec.tsx');
-        expect(existsSync(specFile)).toBe(true);
-    });
     it('skips example test generation when isNewProject is false', async () => {
         const componentDir = join(tmpDir, 'src', 'components', 'my-button');
         mkdirSync(componentDir, { recursive: true });
@@ -345,7 +371,8 @@ export class MyButton { render() { return <button />; } }
             .mockResolvedValueOnce('mock-doc')
             .mockResolvedValueOnce('plugin')
             .mockResolvedValueOnce('browser')
-            .mockResolvedValueOnce('playwright');
+            .mockResolvedValueOnce('playwright')
+            .mockResolvedValueOnce('full-build');
         ctx.prompts.confirm
             .mockResolvedValueOnce(true) // add another
             .mockResolvedValueOnce(false); // stop
@@ -353,7 +380,7 @@ export class MyButton { render() { return <button />; } }
         const config = readFileSync(join(tmpDir, 'vitest.config.ts'), 'utf8');
         expect(config).toContain("name: 'unit'");
         expect(config).toContain("name: 'browser'");
-        expect(config).toContain('stencilVitestPlugin()');
+        expect(config).toContain('stencilVite()');
         expect(config).toContain('playwright()');
     });
 });

package/dist/wizard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../src/wizard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkC,mBAAmB,EAAiB,MAAM,cAAc,CAAC;AAqcvG,eAAO,MAAM,MAAM,EAAE,mBAkIpB,CAAC"}
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../src/wizard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkC,mBAAmB,EAAiB,MAAM,cAAc,CAAC;AAycvG,eAAO,MAAM,MAAM,EAAE,mBAmHpB,CAAC"}

package/dist/wizard.js

@@ -1,4 +1,4 @@
-import { access, mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+import { access, readdir, readFile, writeFile } from 'node:fs/promises';
 import { join, relative } from 'node:path';
 /** Reads the existing vitest.config.ts (if any) and extracts project name/pattern/type metadata. */
 async function loadVitestProjects(rootDir) {
@@ -17,10 +17,10 @@ async function loadVitestProjects(rootDir) {
             const pattern = test.include?.[0];
             if (!name || !pattern)
                 return [];
+            const loadMethod = Array.isArray(p.plugins) && p.plugins.length > 0 ? 'plugin' : 'full-build';
             if (test.browser?.enabled === true) {
-                return [{ type: 'browser', name, pattern }];
+                return [{ type: 'browser', name, pattern, loadMethod }];
             }
-            const loadMethod = Array.isArray(p.plugins) && p.plugins.length > 0 ? 'plugin' : 'full-build';
             return [{ type: 'node', name, pattern, loadMethod }];
         });
     }
@@ -76,7 +76,7 @@ function defaultPattern(name) {
     return `**/*.${name}.spec.{ts,tsx}`;
 }
 /** Runs the interactive prompts for a single Vitest project and returns its configuration. */
-async function promptProject(prompts, usedPatterns, outputTargets, isFirst, askSubdirectory) {
+async function promptProject(prompts, usedPatterns, outputTargets, isFirst) {
     const { text, select, isCancel, cancel, log } = prompts;
     const rawName = await text({
         message: 'Project name? (label for this group of tests - e.g. unit, browser, jsdom)',
@@ -115,19 +115,6 @@ async function promptProject(prompts, usedPatterns, outputTargets, isFirst, askS
         log.warn(`"${pattern}" is already claimed by another project - files will run in both.`);
     }
     usedPatterns.add(pattern);
-    let subdirectory;
-    if (askSubdirectory) {
-        const rawSubdir = await text({
-            message: 'Test file subdirectory? (leave blank to co-locate with component)',
-            placeholder: 'e.g. __tests__',
-            defaultValue: '',
-        });
-        if (isCancel(rawSubdir)) {
-            cancel('Setup cancelled.');
-            process.exit(0);
-        }
-        subdirectory = rawSubdir.trim() || undefined;
-    }
     if (projectType === 'browser') {
         const provider = await select({
             message: 'Browser provider?',
@@ -140,7 +127,28 @@ async function promptProject(prompts, usedPatterns, outputTargets, isFirst, askS
             cancel('Setup cancelled.');
             process.exit(0);
         }
-        return { type: 'browser', name, pattern, subdirectory, provider: provider };
+        const browserLoadMethod = await select({
+            message: 'How should components be loaded?',
+            options: [
+                {
+                    value: 'plugin',
+                    label: 'Plugin (source)',
+                    hint: 'compile on-the-fly via @stencil/unplugin - no dist build required',
+                },
+                { value: 'full-build', label: 'Full build (dist)', hint: 'test the built loader/standalone bundle' },
+            ],
+        });
+        if (isCancel(browserLoadMethod)) {
+            cancel('Setup cancelled.');
+            process.exit(0);
+        }
+        return {
+            type: 'browser',
+            name,
+            pattern,
+            provider: provider,
+            loadMethod: browserLoadMethod,
+        };
     }
     // Node-based
     const env = await select({
@@ -158,8 +166,16 @@ async function promptProject(prompts, usedPatterns, outputTargets, isFirst, askS
     const loadMethod = await select({
         message: 'How should components be loaded?',
         options: [
-            { value: 'plugin', label: 'Plugin (source)', hint: 'compile on-the-fly - module mocking, accurate coverage' },
-            { value: 'full-build', label: 'Full build (dist)', hint: 'test the actual output - no mocking, no coverage' },
+            {
+                value: 'plugin',
+                label: 'Plugin (source)',
+                hint: 'compile on-the-fly via @stencil/unplugin - module mocking, accurate coverage',
+            },
+            {
+                value: 'full-build',
+                label: 'Full build (dist)',
+                hint: 'test the actual output - no module mocking, no coverage',
+            },
         ],
     });
     if (isCancel(loadMethod)) {
@@ -190,7 +206,6 @@ async function promptProject(prompts, usedPatterns, outputTargets, isFirst, askS
         type: 'node',
         name,
         pattern,
-        subdirectory,
         env: env,
         loadMethod: loadMethod,
         outputTarget,
@@ -200,6 +215,8 @@ async function promptProject(prompts, usedPatterns, outputTargets, isFirst, askS
 function collectDeps(projects) {
     const deps = new Set(['vitest']);
     for (const p of projects) {
+        if (p.loadMethod === 'plugin')
+            deps.add('@stencil/unplugin');
         if (p.type === 'node') {
             if (p.env === 'jsdom')
                 deps.add('jsdom');
@@ -222,13 +239,14 @@ function collectDeps(projects) {
 /** Renders a single Vitest workspace project block for vitest.config.ts. */
 function generateProjectBlock(project, excludePatterns) {
     const excludeLine = excludePatterns.length > 0 ? `\n          exclude: [${excludePatterns.map((p) => `'${p}'`).join(', ')}],` : '';
+    const pluginsLine = project.loadMethod === 'plugin' ? '\n        plugins: [stencilVite()],' : '';
+    const setupLine = project.loadMethod === 'full-build' ? `\n          setupFiles: ['./vitest-setup.ts'],` : '';
     if (project.type === 'browser') {
         const providerExpr = project.provider === 'playwright' ? 'playwright()' : 'webdriverio()';
-        return `      {
+        return `      {${pluginsLine}
         test: {
           name: '${project.name}',
-          include: ['${project.pattern}'],${excludeLine}
-          setupFiles: ['./vitest-setup.ts'],
+          include: ['${project.pattern}'],${excludeLine}${setupLine}
           browser: {
             enabled: true,
             provider: ${providerExpr},
@@ -244,8 +262,6 @@ function generateProjectBlock(project, excludePatterns) {
             stencil: { domEnvironment: '${project.env}' },
           },`
         : '';
-    const pluginsLine = project.loadMethod === 'plugin' ? '\n        plugins: [stencilVitestPlugin()],' : '';
-    const setupLine = project.loadMethod === 'full-build' ? `\n          setupFiles: ['./vitest-setup.ts'],` : '';
     return `      {${pluginsLine}
         test: {
           name: '${project.name}',
@@ -256,12 +272,12 @@ function generateProjectBlock(project, excludePatterns) {
 }
 /** Generates the full vitest.config.ts file content for the chosen set of projects. */
 function generateVitestConfig(projects, hasStencilConfig) {
-    const needsPlugin = projects.some((p) => p.type === 'node' && p.loadMethod === 'plugin');
+    const needsPlugin = projects.some((p) => p.loadMethod === 'plugin');
     const needsPlaywright = projects.some((p) => p.type === 'browser' && p.provider === 'playwright');
     const needsWdio = projects.some((p) => p.type === 'browser' && p.provider === 'wdio');
     const imports = [
         `import { defineVitestConfig } from '@stencil/vitest/config';`,
-        needsPlugin ? `import { stencilVitestPlugin } from '@stencil/vitest/plugin';` : null,
+        needsPlugin ? `import { stencilVite } from '@stencil/unplugin';` : null,
         needsPlaywright ? `import { playwright } from '@vitest/browser-playwright';` : null,
         needsWdio ? `import { webdriverio } from '@vitest/browser-webdriverio';` : null,
     ]
@@ -294,9 +310,8 @@ ${projectBlocks},
 });
 `;
 }
-function specTemplate(tagName, importComponent = false, subdirectory) {
-    const importPath = subdirectory ? `'../${tagName}'` : `'./${tagName}'`;
-    const componentImport = importComponent ? `import ${importPath};\n` : '';
+function specTemplate(tagName, importComponent = false) {
+    const componentImport = importComponent ? `import './${tagName}';\n` : '';
     return `import { describe, it, expect, render } from '@stencil/vitest';
 ${componentImport}
 describe('${tagName}', () => {
@@ -340,23 +355,16 @@ async function generateExampleTests(rootDir, projects) {
             const suffix = parsePattern(project.pattern);
             if (!suffix)
                 continue;
-            const dir = project.subdirectory
-                ? join(componentsDir, entry.name, project.subdirectory)
-                : join(componentsDir, entry.name);
-            const specFile = join(dir, `${tagName}${suffix}`);
+            const specFile = join(componentsDir, entry.name, `${tagName}${suffix}`);
             if (await fileExists(specFile))
                 continue;
-            if (project.subdirectory)
-                await mkdir(dir, { recursive: true });
-            const content = project.type === 'browser'
-                ? specTemplate(tagName, false, project.subdirectory)
-                : specTemplate(tagName, project.loadMethod === 'plugin', project.subdirectory);
+            const content = specTemplate(tagName, project.loadMethod === 'plugin');
             await writeFile(specFile, content, 'utf8');
         }
     }
 }
 function needsBuild(project) {
-    return project.type === 'browser' || (project.type === 'node' && project.loadMethod === 'full-build');
+    return project.loadMethod === 'full-build';
 }
 /** Adds `test` and `test:<name>` scripts to package.json if they don't already exist. */
 async function updatePackageJsonScripts(rootDir, projects) {
@@ -402,7 +410,7 @@ export const wizard = {
             let isFirst = true;
             let keepAdding = true;
             while (keepAdding) {
-                const project = await promptProject(prompts, usedPatterns, outputTargets, isFirst, isNewProject);
+                const project = await promptProject(prompts, usedPatterns, outputTargets, isFirst);
                 projects.push(project);
                 isFirst = false;
                 const addAnother = await confirm({ message: 'Add another project?', initialValue: false });
@@ -415,7 +423,7 @@ export const wizard = {
                 await nypm.addDependency(deps, { cwd: rootDir, dev: true });
                 s.stop('Dependencies installed');
             }
-            const needsSetupFile = projects.some((p) => p.type === 'browser' || (p.type === 'node' && p.loadMethod === 'full-build'));
+            const needsSetupFile = projects.some((p) => p.loadMethod === 'full-build');
             if (needsSetupFile) {
                 const setupPath = join(rootDir, 'vitest-setup.ts');
                 if (!(await fileExists(setupPath))) {
@@ -439,29 +447,21 @@ export const wizard = {
     },
     generate: {
         fileTemplates: async (ctx) => {
-            const { prompts, config } = ctx;
+            const { config } = ctx;
             const projects = await loadVitestProjects(config.rootDir);
-            const rawSubdir = await prompts.text({
-                message: 'Test file subdirectory? (leave blank to co-locate with component)',
-                placeholder: 'e.g. __tests__',
-                defaultValue: '',
-            });
-            const subdirectory = !prompts.isCancel(rawSubdir) ? rawSubdir.trim() || undefined : undefined;
             if (projects.length === 0) {
                 return [
                     {
                         label: 'Spec test (.spec.tsx)',
                         extension: 'spec.tsx',
-                        subdirectory,
                         selectedByDefault: true,
-                        template: (tagName) => specTemplate(tagName, true, subdirectory),
+                        template: (tagName) => specTemplate(tagName, true),
                     },
                     {
                         label: 'Browser test (.browser.spec.ts)',
                         extension: 'browser.spec.ts',
-                        subdirectory,
                         selectedByDefault: false,
-                        template: (tagName) => specTemplate(tagName, false, subdirectory),
+                        template: (tagName) => specTemplate(tagName, false),
                     },
                 ];
             }
@@ -475,11 +475,8 @@ export const wizard = {
                     {
                         label,
                         extension: ext,
-                        subdirectory,
                         selectedByDefault: project.type === 'node',
-                        template: project.type === 'browser'
-                            ? (tagName) => specTemplate(tagName, false, subdirectory)
-                            : (tagName) => specTemplate(tagName, project.loadMethod === 'plugin', subdirectory),
+                        template: (tagName) => specTemplate(tagName, project.loadMethod === 'plugin'),
                     },
                 ];
             });

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/stenciljs/vitest"
   },
-  "version": "1.13.3",
+  "version": "1.14.0",
   "description": "First-class testing utilities for Stencil design systems with Vitest",
   "license": "MIT",
   "type": "module",
@@ -111,7 +111,7 @@
   "dependencies": {
     "jiti": "^2.6.1",
     "local-pkg": "^1.1.2",
-    "vitest-environment-stencil": "1.13.3"
+    "vitest-environment-stencil": "1.14.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",