migrate to vitest for vue unit test

ionic-team · Sep 30, 2024 · bb1deb2 · bb1deb2
1 parent c0865f5
commit bb1deb2
Show file tree

Hide file tree

Showing 6 changed files with 323 additions and 92 deletions.
diff --git a/packages/vue-output-target/package.json b/packages/vue-output-target/package.json
@@ -41,7 +41,7 @@
  "prettier.base": "prettier \"./({vue-component-lib,src,test,__tests__}/**/*.{ts,tsx,js,jsx})|*.{ts,tsx,js,jsx}\"",
  "prettier.dry-run": "pnpm run prettier.base --list-different",
  "release": "np",
- "test": "jest"
+ "test": "vitest --run"
  },
  "peerDependencies": {
  "vue": "^3.4.38",
@@ -57,24 +57,9 @@
  },
  "devDependencies": {
  "@types/node": "^18.0.0",
- "jest": "^27.0.0",
+ "vitest": "^2.0.5",
  "rimraf": "^5.0.0",
  "rollup": "^4.14.3",
  "typescript": "~5.0.0"
- },
- "jest": {
- "transform": {
- "^.+\\.(js|ts|tsx)$": "<rootDir>/test/jest.preprocessor.js"
- },
- "testRegex": "(\\.(test|spec))\\.(ts?|tsx?|jsx?)$",
- "moduleFileExtensions": [
- "ts",
- "tsx",
- "js",
- "json",
- "jsx"
- ],
- "testURL": "http://localhost"
- },
- "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0"
+ }
 }
diff --git a/...__tests__/generate-vue-components.spec.ts → ...target/src/generate-vue-component.test.ts b/...__tests__/generate-vue-components.spec.ts → ...target/src/generate-vue-component.test.ts
@@ -1,8 +1,9 @@
-import { createComponentDefinition } from '../src/generate-vue-component';
+import { describe, it, expect } from 'vitest';
+import { createComponentDefinition } from './generate-vue-component';
 
 describe('createComponentDefinition', () => {
  it('should create a Vue component with the render method using createCommonRender', () => {
- const generateComponentDefinition = createComponentDefinition('Components', []);
+ const generateComponentDefinition = createComponentDefinition('Components', { proxiesFile: './src/components.ts' });
  const output = generateComponentDefinition({
  properties: [],
  tagName: 'my-component',
@@ -14,26 +15,29 @@ export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>
 `);
  });
  it('should create a Vue component with custom element support', () => {
- const generateComponentDefinition = createComponentDefinition('Components', [], true);
+ const generateComponentDefinition = createComponentDefinition('Components', { proxiesFile: './src/components.ts' });
  const output = generateComponentDefinition({
  properties: [],
  tagName: 'my-component',
  methods: [],
  events: [],
  });
  expect(output).toEqual(`
-export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>('my-component', defineMyComponent);
+export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>('my-component', undefined);
 `);
  });
 
  it('should create v-model bindings', () => {
- const generateComponentDefinition = createComponentDefinition('Components', [
- {
- elements: ['my-component'],
- event: 'ionChange',
- targetAttr: 'value',
- },
- ]);
+ const generateComponentDefinition = createComponentDefinition('Components', {
+ proxiesFile: './src/components.ts',
+ componentModels: [
+ {
+ elements: ['my-component'],
+ event: 'ionChange',
+ targetAttr: 'value',
+ },
+ ]
+ });
  const output = generateComponentDefinition({
  properties: [
  {
@@ -87,15 +91,19 @@ export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent,
  });
 
  it('should add router and v-model bindings', () => {
- const generateComponentDefinition = createComponentDefinition('Components', [
- {
- elements: ['my-component'],
- event: 'ionChange',
- targetAttr: 'value',
- },
- ]);
+ const generateComponentDefinition = createComponentDefinition('Components', {
+ componentModels: [
+ {
+ elements: ['my-component'],
+ event: 'ionChange',
+ targetAttr: 'value',
+ },
+ ],
+ proxiesFile: './src/components.ts',
+ });
  const output = generateComponentDefinition({
  tagName: 'my-component',
+ methods: [],
  properties: [
  {
  name: 'value',
@@ -146,7 +154,7 @@ export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent,
  });
 
  it('should pass event references to the createCommonRender function', () => {
- const generateComponentDefinition = createComponentDefinition('Components');
+ const generateComponentDefinition = createComponentDefinition('Components', { proxiesFile: './src/components.ts' });
  const output = generateComponentDefinition({
  properties: [],
  tagName: 'my-component',
@@ -180,7 +188,7 @@ export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>
  });
 
  it('should add a prop with Reference to the original component library prop type', () => {
- const generateComponentDefinition = createComponentDefinition('Components');
+ const generateComponentDefinition = createComponentDefinition('Components', { proxiesFile: './src/components.ts' });
  const output = generateComponentDefinition({
  properties: [
  {

diff --git a/...utput-target/__tests__/output-vue.spec.ts → .../vue-output-target/src/output-vue.test.ts b/...utput-target/__tests__/output-vue.spec.ts → .../vue-output-target/src/output-vue.test.ts
@@ -1,6 +1,8 @@
-import { ComponentCompilerMeta } from '@stencil/core/internal';
-import { generateProxies } from '../src/output-vue';
-import { PackageJSON, OutputTargetVue } from '../src/types';
+import { describe, it, expect } from 'vitest';
+
+import { ComponentCompilerMeta, Config } from '@stencil/core/internal';
+import { generateProxies } from './output-vue';
+import { PackageJSON, OutputTargetVue } from './types';
 
 describe('generateProxies', () => {
  const components: ComponentCompilerMeta[] = [];
@@ -23,7 +25,7 @@ describe('generateProxies', () => {
  `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from '@stencil/vue-output-target/runtime';
 
 import type { JSX } from 'component-library';
 
@@ -48,7 +50,7 @@ applyPolyfills().then(() => defineCustomElements());
  `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from '@stencil/vue-output-target/runtime';
 
 import type { JSX } from 'component-library';
 
@@ -73,7 +75,7 @@ defineCustomElements();
  `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from '@stencil/vue-output-target/runtime';
 
 import type { JSX } from 'component-library';
 
@@ -95,7 +97,7 @@ import type { JSX } from 'component-library';
  `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from '@stencil/vue-output-target/runtime';
 
 import type { JSX } from 'component-library/components';
 
@@ -118,7 +120,7 @@ import type { JSX } from 'component-library/components';
  `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
+import { defineContainer } from '@stencil/vue-output-target/runtime';
 
 import type { JSX } from 'component-library/custom-dir/hello';
 

diff --git a/...ue-output-target/__tests__/plugin.spec.ts → ...ages/vue-output-target/src/plugin.test.ts b/...ue-output-target/__tests__/plugin.spec.ts → ...ages/vue-output-target/src/plugin.test.ts
@@ -1,6 +1,8 @@
-import { Config } from '@stencil/core/internal';
-import { OutputTargetVue } from '../src/types';
-import { normalizeOutputTarget } from '../src/plugin';
+import { describe, it, expect } from 'vitest';
+
+import { type Config } from '@stencil/core/internal';
+import { OutputTargetVue } from './types';
+import { normalizeOutputTarget } from './plugin';
 
 describe('normalizeOutputTarget', () => {
  const config: Config = {

diff --git a/packages/vue-output-target/test/jest.preprocessor.js b/packages/vue-output-target/test/jest.preprocessor.js