Fix the Jest configuration

.gitignore

@@ -17,5 +17,5 @@ yarn-error.log*
 # Template unwanted files
 /template/.nuxt/
 /template/dist/
-/template/package-lock.json
+/template/package*.json
 /template/static/sw*

template/.babelrc.js

@@ -1,16 +1,17 @@
 module.exports = {
-  "env": {
-    "test": {
-      "presets": [
+  env: {
+    test: {
+      presets: [
         [
-          "@babel/preset-env",
+          '@babel/preset-env',
           {
-            "targets": {
-              "node": "current"
-            }
-          }
-        ]
-      ]
-    }
-  }
-}
+            targets: {
+              node: 'current',
+            },
+          },
+        ],
+      ],
+      plugins: ['require-context-hook'],
+    },
+  },
+};

template/_package.json

@@ -42,6 +42,7 @@
     "@vue/test-utils": "^1.0.0-beta.27",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.1.0",
+    "babel-plugin-require-context-hook": "^1.0.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^4.1.0",
     "eslint-import-resolver-alias": "^1.1.2",

template/components/Icon.vue

@@ -0,0 +1,17 @@
+<template>
+  <component :is="name" class="icon" />
+</template>
+
+<script>
+  import components from '~/utils/get-icons';
+
+  export default {
+    components,
+    props: {
+      name: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+</script>

template/jest.config.js

@@ -1,6 +1,8 @@
 module.exports = {
   projects: [
     {
+      displayName: 'Test',
+      setupFiles: ['<rootDir>/test/__setup__/require-context.js'],
       moduleNameMapper: {
         '^@/(.*)$': '<rootDir>/$1',
         '^~/(.*)$': '<rootDir>/$1',
@@ -17,13 +19,28 @@ module.exports = {
     {
       runner: 'jest-runner-eslint',
       displayName: 'ESLint',
-      testMatch: ['<rootDir>/**/*.vue', '<rootDir>/**/*.js', '!<rootDir>/dist'],
+      moduleFileExtensions: ['js', 'vue'],
+      testMatch: [
+        '<rootDir>/components/**/*.vue',
+        '<rootDir>/layouts/**/*.vue',
+        '<rootDir>/pages/**/*.vue',
+        '<rootDir>/middleware/**/*.js',
+        '<rootDir>/plugins/**/*.js',
+        '<rootDir>/store/**/*.js',
+        '<rootDir>/test/**/*.js',
+        '<rootDir>/utils/**/*.js',
+      ],
     },
     {
       runner: 'jest-runner-stylelint',
       displayName: 'StyleLint',
       moduleFileExtensions: ['css', 'scss', 'vue'],
-      testMatch: ['<rootDir>/**/*.vue', '<rootDir>/**/*.scss', '!<rootDir>/dist'],
+      testMatch: [
+        '<rootDir>/components/**/*.vue',
+        '<rootDir>/layouts/**/*.vue',
+        '<rootDir>/pages/**/*.vue',
+        '<rootDir>/assets/scss/**/*.scss',
+      ],
     },
   ],
 };

template/nuxt.config.js

@@ -27,9 +27,7 @@ export default {
   /*
    ** Plugins to load before mounting the App
    */
-  plugins: [
-    '~/plugins/vue-icon',
-  ],
+  plugins: ['~/plugins/vue-icon'],
   /*
    ** Nuxt.js dev-modules
    */

template/plugins/vue-icon.js

@@ -1,33 +1,7 @@
 /**
- * Inject a global `VueIcon` component.
+ * Inject the `VueIcon` component globally.
  */
 import Vue from 'vue';
+import VueIcon from '~/components/Icon';
 
-const files = require.context('~/assets/svg', true, /[\s\S]*$/);
-const components = files.keys().reduce((icons, path) => {
-  const file = path.replace('./', '');
-  const key = file.replace('.svg', '');
-  icons[key] = async () => import(`~/assets/svg/${file}`);
-  return icons;
-}, {});
-
-Vue.component('vue-icon', {
-  components,
-  props: {
-    /**
-     * The name of the icon.
-     */
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-  render(h) {
-    console.log(this);
-    return h(this.name, {
-      class: 'icon',
-      on: this.$listeners,
-      attr: this.$attrs,
-    });
-  },
-});
+Vue.component('vue-icon', VueIcon);

template/test/Logo.spec.js

@@ -1,9 +1,13 @@
-import { mount } from '@vue/test-utils';
-import Logo from '@/components/Logo';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueIcon from '~/components/Icon';
+import Logo from '~/components/Logo';
+
+const localVue = createLocalVue();
+localVue.component('vue-icon', VueIcon);
 
 describe('Logo', () => {
   test('is a Vue instance', () => {
-    const wrapper = mount(Logo);
+    const wrapper = shallowMount(Logo, { localVue });
     expect(wrapper.isVueInstance()).toBeTruthy();
   });
 });

template/test/__setup__/require-context.js

@@ -0,0 +1,3 @@
+import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
+
+registerRequireContextHook();

template/utils/get-icons.js

@@ -0,0 +1,9 @@
+const files = require.context('../assets/svg/', true, /\.svg$/);
+const components = files.keys().reduce((icons, path) => {
+  const file = path.replace('./', '');
+  const key = file.replace('.svg', '');
+  icons[key] = async () => import(`~/assets/svg/${file}`);
+  return icons;
+}, {});
+
+export default components;