chore: Cleaned up Vue code (#2184)

* Moved to latest version of Jest

* Added changeset

* Un pinned resolutions

* Added comment

Co-authored-by: Erik Hanchett <ehhanche@amazon.com>

.changeset/giant-candles-jam.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-vue': patch
+---
+
+Cleaned Vue code. Updated jest to latest. Added in JSX. Updated how editor displays interface in .vue files.

package.json

@@ -54,15 +54,13 @@
     "eventsource": "~2.0.2",
     "fs-extra": "^10.0.0",
     "glob-parent": "^6.0.2",
-    "jest": "^26.6.3",
     "json-schema": "^0.4.0",
     "node-forge": "1.3.0",
     "nth-check": "^2.0.1",
     "prismjs": "^1.25.0",
     "prism-react-renderer": "1.2.1",
     "shell-quote": "1.7.3",
     "trim": "^0.0.3",
-    "ts-jest": "^26.5.6",
     "vscode-vue-languageservice": "0.27.26",
     "ws": "^7.4.6"
   },

packages/vue/__tests__/Authenticator.spec.ts

@@ -1,17 +1,14 @@
-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
-Object.defineProperty(global.self, 'crypto', {
-  value: {
-    getRandomValues: (arr: Array<unknown>) => crypto.randomBytes(arr.length),
-  },
-});
+import Authenticator from '../src/components/authenticator.vue';
+import { components } from '../global-spec';
+import { render } from '@testing-library/vue';
 
 describe('Authenticator', () => {
   it('Authenticator Exists', () => {
-    const wrapper = mount(Authenticator);
+    const wrapper = render(Authenticator, {
+      global: {
+        components,
+      },
+    });
 
     expect(wrapper).toBeTruthy();
   });

packages/vue/global-spec.ts

@@ -0,0 +1,21 @@
+import BaseWrapper from './src/components/primitives/base-wrapper.vue';
+import BaseFooter from './src/components/primitives/base-footer.vue';
+import BaseForm from './src/components/primitives/base-form.vue';
+import BaseAlert from './src/components/primitives/base-alert.vue';
+import BaseTwoTabItem from './src/components/primitives/base-two-tab-item.vue';
+import BaseTwoTabs from './src/components/primitives/base-two-tabs.vue';
+import BaseFieldSet from './src/components/primitives/base-field-set.vue';
+import BaseHeading from './src/components/primitives/base-heading.vue';
+import AmplifyButton from './src/components/primitives/amplify-button.vue';
+
+export const components = {
+  BaseWrapper,
+  BaseFooter,
+  BaseForm,
+  AmplifyButton,
+  BaseTwoTabItem,
+  BaseTwoTabs,
+  BaseAlert,
+  BaseFieldSet,
+  BaseHeading,
+};

packages/vue/jest.config.cjs

@@ -1,10 +1,11 @@
 module.exports = {
+  testEnvironment: 'jsdom',
   verbose: true,
-  moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
+  moduleFileExtensions: ['js', 'ts', 'json', 'vue', 'tsx'],
   modulePathIgnorePatterns: ['<rootDir>/dist/'],
   transform: {
-    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.(ts)$': 'ts-jest',
     '^.+\\.(js|jsx)$': 'babel-jest',
-    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
   },
 };

packages/vue/package.json

@@ -42,29 +42,36 @@
     "qrcode": "1.5.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.18.5",
     "@babel/preset-env": "^7.15.8",
     "@rollup/plugin-dynamic-import-vars": "^1.4.0",
     "@rollup/plugin-typescript": "^8.2.5",
     "@rushstack/eslint-patch": "^1.1.3",
+    "@testing-library/vue": "^6.6.0",
     "@types/jest": "^27.0.1",
     "@types/node": "^17.0.34",
-    "@vitejs/plugin-vue": "^1.6.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/babel-plugin-jsx": "^1.1.1",
     "@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",
-    "babel-jest": "^26.3.1",
+    "@vue/test-utils": "^2.0.0",
+    "@vue/vue3-jest": "^27",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^27",
     "eslint": "^8.15.0",
     "eslint-plugin-vue": "^9.0.1",
-    "jest": "^26.6.3",
+    "jest": "^27",
+    "jest-environment-jsdom": "^27",
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "ts-jest": "^26.4.2",
+    "ts-jest": "^27",
     "typescript": "^4.6.4",
     "unplugin-vue-components": "^0.15.0",
-    "vite": "^2.5.1",
-    "vue-jest": "^5.0.0-alpha.10",
+    "vite": "^2.9.12",
+    "vite-jest": "^0.1.4",
     "vue-tsc": "^0.3.0"
   },
   "peerDependencies": {

packages/vue/tsconfig.json

@@ -5,7 +5,7 @@
     "strict": true,
     "jsx": "preserve",
     "importHelpers": true,
-    "declaration": true,
+    "declaration": false, // this is overriden in the vite.config.ts typescript2 settings
     "moduleResolution": "node",
     "skipLibCheck": true,
     "esModuleInterop": true,

packages/vue/vite.config.ts

@@ -6,12 +6,14 @@ 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({
   plugins: [
     vue(),
+    vueJsx(),
     Components({
       dirs: ['src/components/primitives'],
       exclude: [/node_modules/],