Add testing config

.eslintrc.js

@@ -242,6 +242,12 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+      env: {
+        jest: true,
+      },
+    },
   ],
   rules: {
     ...baseRules,

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

helper/classes.json

@@ -57,7 +57,8 @@
     "is-fullwidth": ["expanded"]
   },
   "VButton": {
-    "is-fullwidth": ["expanded"]
+    "is-fullwidth": ["expanded"],
+    "disabled": ["disabled"]
   },
   "VTag": {
     "tags": ["isClosable"],

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest',
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+  },
+}

package.json

@@ -31,7 +31,8 @@
     "lint-arg": "eslint --ext .js,.ts,.vue,.md,.html --max-warnings=0",
     "lint-fix": "eslint --ext .js,.ts,.vue,.md,.html --fix .",
     "prepublishOnly": "npm run build",
-    "release": "npm run build && np"
+    "release": "npm run build && np",
+    "test:unit": "vue-cli-service test:unit"
   },
   "husky": {
     "hooks": {
@@ -56,15 +57,21 @@
     "@pathscale/eslint-plugin-vue3": "0.0.1",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-replace": "^2.3.4",
+    "@testing-library/vue": "^6.4.2",
     "@types/babel__traverse": "^7.11.0",
     "@types/fs-extra": "^9.0.5",
     "@types/node": "*",
     "@types/resolve": "^1.17.1",
     "@typescript-eslint/eslint-plugin": "^4.11.0",
     "@typescript-eslint/parser": "^4.11.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "^4.5.15",
+    "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.4",
     "@wessberg/rollup-plugin-ts": "^1.3.8",
     "autoprefixer": "^10.1.0",
+    "babel-eslint": "^10.1.0",
     "eslint": "^7.16.0",
     "eslint-config-ash-nazg": "^22.10.0",
     "eslint-config-prettier": "^7.1.0",
@@ -107,7 +114,8 @@
     "tslib": "^2.0.3",
     "typescript": "^4.1.3",
     "vue": "^3.0.4",
-    "vue-eslint-parser": "^7.3.0"
+    "vue-eslint-parser": "^7.3.0",
+    "vue-jest": "^5.0.0-0"
   },
   "peerDependencies": {
     "vue": "^3.0.4"

src/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png">
+  <HelloWorld msg="Welcome to Your Vue.js App"/>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

tests/unit/example.spec.js

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/vue'
+import HelloWorld from '@/components/HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const { getByText } = render(HelloWorld, {
+      props: { msg },
+    })
+    getByText(msg)
+  })
+})