Vue: Cleanup Vue Code

.changeset/tough-insects-beam.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-vue': patch
+---
+
+Switched to vitest for testing. Add in JSX for the future. Fixed an error that showed for .vue files in the editor if there was an interface present.

packages/vue/.gitignore

@@ -1 +1,2 @@
 dist
+coverage/

packages/vue/__tests__/Authenticator.spec.ts → packages/vue/__tests__/Authenticator.spec.tsx

@@ -2,16 +2,16 @@ import { mount } from '@vue/test-utils';
 import { Authenticator } from '../dist';
 import crypto from 'crypto';
 
-// This is needed for jest to get crypto module needed by nanoid
+// This is needed for vitest to get crypto module needed by nanoid
 Object.defineProperty(global.self, 'crypto', {
   value: {
-    getRandomValues: (arr: Array<any>) => crypto.randomBytes(arr.length),
+    getRandomValues: (arr: Array<string>) => crypto.randomBytes(arr.length),
   },
 });
 
 describe('Authenticator', () => {
   it('Authenticator Exists', () => {
-    const wrapper = mount(Authenticator);
+    const wrapper = mount(() => <Authenticator />);
 
     expect(wrapper).toBeTruthy();
   });

packages/vue/__tests__/exports.spec.ts

@@ -4,7 +4,7 @@ describe('@aws-amplify/ui-vue', () => {
   describe('exports', () => {
     it('should match snapshot', () => {
       expect(Object.keys(exported)).toMatchInlineSnapshot(`
-        Array [
+        [
           "AmplifyButton",
           "AmplifyCheckBox",
           "AmplifyTextField",

packages/vue/package.json

@@ -30,7 +30,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "test": "yarn test:unit",
     "test:watch": "yarn test:unit:watch",
-    "test:unit": "jest",
+    "test:unit": "vitest --environment happy-dom",
     "test:unit:watch": "jest --watch"
   },
   "dependencies": {
@@ -47,25 +47,29 @@
     "@rollup/plugin-typescript": "^8.2.5",
     "@rushstack/eslint-patch": "^1.1.3",
     "@types/jest": "^27.0.1",
-    "@types/node": "^17.0.34",
-    "@vitejs/plugin-vue": "^1.6.0",
+    "@types/node": "^17.0.43",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/cli-plugin-unit-jest": "5.0.0-beta.2",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.0.0-rc.12",
+    "@vue/test-utils": "^2.0.1",
     "babel-jest": "^26.3.1",
+    "c8": "^7.11.3",
     "eslint": "^8.15.0",
     "eslint-plugin-vue": "^9.0.1",
+    "happy-dom": "^5.3.1",
     "jest": "^26.6.3",
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "ts-jest": "^26.4.2",
     "typescript": "^4.6.4",
     "unplugin-vue-components": "^0.15.0",
-    "vite": "^2.5.1",
+    "vite": "^2.9.9",
+    "vitest": "^0.15.0",
     "vue-jest": "^5.0.0-alpha.10",
-    "vue-tsc": "^0.3.0"
+    "vue-tsc": "^0.37.8"
   },
   "peerDependencies": {
     "aws-amplify": "^4.2.2"

packages/vue/tsconfig.json

@@ -5,7 +5,7 @@
     "strict": true,
     "jsx": "preserve",
     "importHelpers": true,
-    "declaration": true,
+    "declaration": false,
     "moduleResolution": "node",
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -14,7 +14,13 @@
     "sourceMap": true,
     "baseUrl": ".",
     "resolveJsonModule": true,
-    "types": ["webpack-env", "vite/client", "@types/jest"],
+    "types": [
+      "webpack-env",
+      "vite/client",
+      "@types/jest",
+      "vitest/globals",
+      "node"
+    ],
     "paths": {
       "@/*": ["src/*"]
     },

packages/vue/vite.config.ts

@@ -1,17 +1,34 @@
-// vite.config.js
-
+/// <reference types="vitest" />
 import { defineConfig } from 'vite';
 import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';
 import path from 'path';
 import vue from '@vitejs/plugin-vue';
 import typescript2 from 'rollup-plugin-typescript2';
 import Components from 'unplugin-vue-components/vite';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 
 const resolvePath = (str: string) => path.resolve(__dirname, str);
 
 export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    deps: {
+      inline: [
+        'canvas',
+        'tslib',
+        'xstate',
+        'amazon-cognito-identity-js',
+        '@aws-amplify/storage',
+        '@aws-amplify/ui/**',
+        /\/packages\/.*\/esm\/(.*\.js)$/,
+      ],
+    },
+    threads: false,
+  },
   plugins: [
     vue(),
+    vueJsx(),
     Components({
       dirs: ['src/components/primitives'],
       exclude: [/node_modules/],