From 9a16b3d40a4baad4c23b16f63d592b9ae38d41d3 Mon Sep 17 00:00:00 2001 From: Titouan Mathis Date: Sun, 26 Jan 2020 19:39:34 +0100 Subject: [PATCH] Fix the Jest configuration --- .gitignore | 2 +- template/.babelrc.js | 27 +++++++++--------- template/_package.json | 1 + template/components/Icon.vue | 17 ++++++++++++ template/jest.config.js | 21 ++++++++++++-- template/nuxt.config.js | 4 +-- template/plugins/vue-icon.js | 32 ++-------------------- template/test/Logo.spec.js | 10 +++++-- template/test/__setup__/require-context.js | 3 ++ template/utils/get-icons.js | 9 ++++++ 10 files changed, 75 insertions(+), 51 deletions(-) create mode 100644 template/components/Icon.vue create mode 100644 template/test/__setup__/require-context.js create mode 100644 template/utils/get-icons.js diff --git a/.gitignore b/.gitignore index 77f8798..27c0ea1 100644 --- a/.gitignore +++ b/.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* \ No newline at end of file diff --git a/template/.babelrc.js b/template/.babelrc.js index 8b0263e..19e2e5a 100644 --- a/template/.babelrc.js +++ b/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'], + }, + }, +}; diff --git a/template/_package.json b/template/_package.json index d6796b3..c40953b 100644 --- a/template/_package.json +++ b/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", diff --git a/template/components/Icon.vue b/template/components/Icon.vue new file mode 100644 index 0000000..beb5d75 --- /dev/null +++ b/template/components/Icon.vue @@ -0,0 +1,17 @@ + + + diff --git a/template/jest.config.js b/template/jest.config.js index c59469e..6fe649a 100644 --- a/template/jest.config.js +++ b/template/jest.config.js @@ -1,6 +1,8 @@ module.exports = { projects: [ { + displayName: 'Test', + setupFiles: ['/test/__setup__/require-context.js'], moduleNameMapper: { '^@/(.*)$': '/$1', '^~/(.*)$': '/$1', @@ -17,13 +19,28 @@ module.exports = { { runner: 'jest-runner-eslint', displayName: 'ESLint', - testMatch: ['/**/*.vue', '/**/*.js', '!/dist'], + moduleFileExtensions: ['js', 'vue'], + testMatch: [ + '/components/**/*.vue', + '/layouts/**/*.vue', + '/pages/**/*.vue', + '/middleware/**/*.js', + '/plugins/**/*.js', + '/store/**/*.js', + '/test/**/*.js', + '/utils/**/*.js', + ], }, { runner: 'jest-runner-stylelint', displayName: 'StyleLint', moduleFileExtensions: ['css', 'scss', 'vue'], - testMatch: ['/**/*.vue', '/**/*.scss', '!/dist'], + testMatch: [ + '/components/**/*.vue', + '/layouts/**/*.vue', + '/pages/**/*.vue', + '/assets/scss/**/*.scss', + ], }, ], }; diff --git a/template/nuxt.config.js b/template/nuxt.config.js index af049f9..f0b9ea9 100644 --- a/template/nuxt.config.js +++ b/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 */ diff --git a/template/plugins/vue-icon.js b/template/plugins/vue-icon.js index 5c1abec..fe75996 100644 --- a/template/plugins/vue-icon.js +++ b/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); diff --git a/template/test/Logo.spec.js b/template/test/Logo.spec.js index 153ea32..a121c5e 100644 --- a/template/test/Logo.spec.js +++ b/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(); }); }); diff --git a/template/test/__setup__/require-context.js b/template/test/__setup__/require-context.js new file mode 100644 index 0000000..f0da5a9 --- /dev/null +++ b/template/test/__setup__/require-context.js @@ -0,0 +1,3 @@ +import registerRequireContextHook from 'babel-plugin-require-context-hook/register'; + +registerRequireContextHook(); diff --git a/template/utils/get-icons.js b/template/utils/get-icons.js new file mode 100644 index 0000000..995e0c4 --- /dev/null +++ b/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;