fix(wc): replace web-test-runner config with vitest

Hristo Hristov · Hristo Hristov · commit 4db7467fc9c1 · 2025-05-19T14:23:07.000+03:00
diff --git a/packages/cli/templates/webcomponents/igc-ts/accordion/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/accordion/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcAccordionComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/avatar/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/avatar/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcAvatarComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/badge/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/badge/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcBadgeComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/banner/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/banner/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcBannerComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/button-group/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/button-group/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcButtonGroupComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/button/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/button/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcButtonComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/calendar/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/calendar/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcCalendarComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/card/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/card/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcCardComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/checkbox/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/checkbox/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcCheckboxComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/chip/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/chip/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcChipComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcCircularProgressComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcSubscriptionFormComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/date-picker/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/date-picker/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcAvatarComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/date-time-input/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/date-time-input/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,9 +1,9 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('gcDateTimeInputComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {
     const element = document.createElement('app-$(path)');
     expect(element).to.be.instanceOf($(ClassName));
   });
-});
+});
diff --git a/packages/cli/templates/webcomponents/igc-ts/divider/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/divider/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcDividerComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcDockManagerComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/dropdown/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/dropdown/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcDropdownComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcExpansionPanelComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcFinancialChartComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('Form', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcDataGridComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcGridEditingComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcGridSummariesComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/icon-button/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/icon-button/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcIconButtonComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/icon/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/icon/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcIconComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/input/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/input/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcInputComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcLinearGaugeComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcLinearProgressComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/list/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/list/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcListComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/navbar/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/navbar/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcNavbarComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcPieChartComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/package.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/package.json
@@ -17,7 +17,7 @@
     "build": "rimraf dist && tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite.js build",
     "start:build": "web-dev-server --root-dir dist --app-index index.html --open",
     "lint": "eslint \"**/*.{js,ts}\" --ignore-pattern .gitignore",
-    "test": "tsc --project tsconfig.test.json && wtr"
+    "test": "tsc --project tsconfig.test.json && vitest run"
   },
   "dependencies": {
     "@vaadin/router": "^1.7.4",
@@ -27,23 +27,22 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
-    "@open-wc/testing": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
     "@web/dev-server": "^0.4.6",
-    "@web/test-runner": "^0.18.0",
     "babel-plugin-template-html-minifier": "^4.1.0",
     "concurrently": "^9.1.2",
     "deepmerge": "^4.2.2",
     "eslint": "^9.20.0",
     "eslint-plugin-lit": "^1.8.2",
     "igniteui-cli": "~14.4.1",
+    "jsdom": "^26.1.0",
     "rimraf": "^5.0.10",
     "source-map": "^0.7.4",
     "tslib": "^2.8.1",
-    "@types/mocha": "^10.0.6",
     "vite": "^6.0.10",
     "vite-plugin-pwa": "^0.21.1",
-    "vite-plugin-static-copy": "^2.2.0"
+    "vite-plugin-static-copy": "^2.2.0",
+    "vitest": "^3.1.3"
   }
 }
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/src/app/app.test.ts b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/src/app/app.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import App from './app.js';
 
 describe('App', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/tsconfig.test.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/tsconfig.test.json
@@ -5,7 +5,8 @@
     "outDir": "test"
   },
   "exclude": [
-    "dist"
+    "dist",
+    "test"
   ],
   "include": [
     "**/*.ts"
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/vite.config.ts b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/vite.config.ts
@@ -20,6 +20,10 @@ export default defineConfig({
     emptyOutDir: false,
     chunkSizeWarningLimit: 10 * 1024 * 1024 // 10 MB
   },
+  test: {
+    environment: 'jsdom',
+    include: ['test/src/app/**/*.test.js']
+  },
   plugins: [
     /** Copy static assets */
     viteStaticCopy({
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/web-test-runner.config.mjs b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/web-test-runner.config.mjs
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json
@@ -17,7 +17,7 @@
     "build": "rimraf dist && tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite.js build",
     "start:build": "web-dev-server --root-dir dist --app-index index.html --open",
     "lint": "eslint \"**/*.{js,ts}\" --ignore-pattern .gitignore",
-    "test": "tsc --project tsconfig.test.json && wtr"
+    "test": "tsc --project tsconfig.test.json && vitest run"
   },
   "dependencies": {
     "@vaadin/router": "^1.7.4",
@@ -35,23 +35,22 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
-    "@open-wc/testing": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
     "@web/dev-server": "^0.4.6",
-    "@web/test-runner": "^0.18.0",
     "babel-plugin-template-html-minifier": "^4.1.0",
     "concurrently": "^9.1.2",
     "deepmerge": "^4.2.2",
     "eslint": "^9.20.0",
     "eslint-plugin-lit": "^1.8.2",
     "igniteui-cli": "^14.0.0",
+    "jsdom": "^26.1.0",
     "rimraf": "^5.0.10",
     "source-map": "^0.7.4",
     "tslib": "^2.8.1",
-    "@types/mocha": "^10.0.6",
     "vite": "^6.0.10",
     "vite-plugin-pwa": "^0.21.1",
-    "vite-plugin-static-copy": "^2.2.0"
+    "vite-plugin-static-copy": "^2.2.0",
+    "vitest": "^3.1.3"
   }
 }
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/src/app/home/home.test.ts b/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/src/app/home/home.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import { HomeComponent } from './home.js';
 
 describe('HomeComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcRadialGaugeComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/radio-group/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/radio-group/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcRadioGroupComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/rating/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/rating/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcRatingComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/ripple/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/ripple/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcRippleComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/slider/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/slider/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcSliderComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/switch/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/switch/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcSwitchComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/tabs/default/files/src/app/__path__/__filePrefix__.test b/packages/cli/templates/webcomponents/igc-ts/tabs/default/files/src/app/__path__/__filePrefix__.test
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcTabsComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/text-area/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/text-area/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcTextareaComponent', () => {
diff --git a/packages/cli/templates/webcomponents/igc-ts/tree/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/tree/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,4 +1,4 @@
-import { expect } from '@open-wc/testing';
+import { describe, it, expect } from 'vitest';
 import $(ClassName) from './$(path).js';
 
 describe('IgcTreeComponent', () => {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { expect } from '@open-wc/testing';`
	`1`	`+import { describe, it, expect } from 'vitest';`
`2`	`2`	`import $(ClassName) from './$(path).js';`
`3`	`3`
`4`	`4`	`describe('IgcAccordionComponent', () => {`