I have a problem with fire the Jest tests for the Nuxt/Vue components. Last day i connected all that need for test, and had resolve many errors with jsdom and babel issues, but can't resolve problem with Vue component.
The error is
TypeError: Cannot read property 'child' of undefined
4 | describe('Компонент Counter', () => {
5 | test("renders properly", () => {
> 6 | const wrapper = shallowMount(Greeting); // or mount - it's doesn't metter
| ^
7 | console.log(wrapper);
8 | });
9 |
My comoponent Greeting
<template>
<div> Hello World! </div>
</template>
<script>
export default {
name: 'Greeting'
};
</script>
My Greeting.spec.js
import {mount, shallowMount} from '#vue/test-utils';
import Greeting from '../../components/Greeting.vue';
require('jsdom-global')();
describe('Компонент Counter', () => {
test("renders properly", () => {
const wrapper = shallowMount(Greeting);
console.log(wrapper);
});
});
jest.config.js
module.exports = {
moduleFileExtensions: ["js", "json", "vue"],
watchman: false,
preset: "#nuxt/test-utils",
transform: {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "#vue/vue2-jest"
},
};
package.json
"scripts": {
"test": "jest"
},
"devDependencies": {
"#nuxt/test-utils": "^0.2.2",
"#types/jest": "^27.0.3",
"#vue/cli-plugin-babel": "^4.5.15",
"#vue/test-utils": "^1.3.0",
"#vue/vue2-jest": "^27.0.0-alpha.4",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.1",
"babel-jest": "^27.4.5",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0",
"jest": "^27.4.5",
"jsdom-global": "^3.0.2",
"node-sass": "^4.7.2",
"pug": "^2.0.3",
"pug-plain-loader": "^1.0.0",
"sass-loader": "^6.0.7",
"ts-jest": "^27.1.2",
"vue": "^2.6.14",
"vue-jest": "^3.0.7",
"vue-template-compiler": "^2.6.14",
"vueify": "^9.4.1"
}
So the answer is that Jest have an attribute for working with JSDOM and i don't need an additional requires.
i just add in jest.config.js single line in the bottom
module.exports = {
moduleFileExtensions: ["js", "json", "vue"],
watchman: false,
preset: "#nuxt/test-utils",
transform: {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "#vue/vue2-jest"
},
testEnvironment: 'jsdom'
};
Related
I'm trying to run unit test for composition-api component. I'm on Vue 2.7 with TS and the following packages:
"nuxt": "^2.15.8",
"#nuxtjs/composition-api": "^0.33.1",
"#vue/test-utils": "^1.3.0",
"jest": "^28.1.3",
The issue is the following error is thrown on component mount:
SyntaxError: Unexpected token (1:1141)
at Parser.pp$4.raise (node_modules/vue-template-es2015-compiler/buble.js:2757:13)
at Parser.pp.unexpected (node_modules/vue-template-es2015-compiler/buble.js:647:8)
at Parser.pp$3.parseExprAtom (node_modules/vue-template-es2015-compiler/buble.js:2196:10)
at Parser.<anonymous> (node_modules/vue-template-es2015-compiler/buble.js:6003:24)
at Parser.parseExprAtom (node_modules/vue-template-es2015-compiler/buble.js:6129:31)
at Parser.pp$3.parseExprSubscripts (node_modules/vue-template-es2015-compiler/buble.js:2047:19)
at Parser.pp$3.parseMaybeUnary (node_modules/vue-template-es2015-compiler/buble.js:2024:17)
at Parser.pp$3.parseExprOps (node_modules/vue-template-es2015-compiler/buble.js:1966:19)
at Parser.pp$3.parseMaybeConditional (node_modules/vue-template-es2015-compiler/buble.js:1949:19)
at Parser.pp$3.parseMaybeAssign (node_modules/vue-template-es2015-compiler/buble.js:1925:19)
The test example:
import { mount, createLocalVue } from '#vue/test-utils';
import CompositionApi from '#nuxtjs/composition-api';
import CustomSelect from '#/components/shared/CustomSelect';
import Vuetify from 'vuetify';
const localVue = createLocalVue();
localVue.use(CompositionApi);
let vuetify;
beforeEach(() => {
jest.clearAllMocks();
vuetify = new Vuetify();
});
describe('test select component', () => {
test('Mounts correclty', () => {
const wrapper = mount(CustomSelect, {
localVue,
vuetify,
});
expect(wrapper.vm).toBeTruthy();
});
});
The config:
// jest.config.js
module.exports = {
globalSetup: '<rootDir>/jest.setup.js',
setupFiles: ['<rootDir>/tests/jest.init.js'],
testEnvironment: 'jsdom',
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js',
'^#nuxtjs/composition-api$':
'#nuxtjs/composition-api/dist/runtime/index.js',
},
moduleFileExtensions: ['js', 'vue', 'json'],
transform: {
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
'^.+\\.ts?$': 'ts-jest',
'.+\\.(css|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
},
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!(#nuxtjs/composition-api)/)',
],
snapshotSerializers: ['jest-serializer-vue'],
testMatch: ['<rootDir>/tests/unit/**/*.spec.js'],
};
package.json
{
.....
"test": "jest",
"test:watch": "jest --watch",
.....
},
"engines": {
"npm": "8.11",
"node": "16.16"
},
"dependencies": {
.....
"#babel/eslint-parser": "^7.18.9",
"#nuxt/types": "^2.15.8",
"#nuxt/typescript-build": "^2.1.0",
"#nuxtjs/composition-api": "^0.33.1",
"#nuxtjs/vuetify": "^1.12.3",
"#vueuse/core": "^9.3.1",
"flush-promises": "^1.0.2",
"jest-environment-jsdom": "^28.1.3",
"jest-mock-axios": "^4.7.0-beta",
"nuxt": "^2.15.8",
.....
},
"devDependencies": {
.....
"#babel/core": "^7.19.1",
"#babel/preset-env": "^7.19.1",
"#faker-js/faker": "^7.6.0",
"#vue/server-test-utils": "^1.3.0",
"#vue/test-utils": "^1.3.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^28.1.3",
"eslint": "^8.20.0",
"jest": "^28.1.3",
"jest-cli": "^28.1.3",
"jest-serializer-vue": "^2.0.2",
"jest-transform-stub": "^2.0.0",
"mockdate": "^3.0.2",
"vue-jest": "^3.0.7"
.....
}
}
I've tried all the suggestions from Jest docs, including: specifying "transformIgnorePatterns", specifying "moduleNameMapper", enabling "ECMAScript Modules" but it won't help.
What should be the working setup to test composition-api components on Vue 2.7 + Nuxt + Vuetify?
I using Jest 27.5.1 with TypeScript.
When I try to test, I got these error:
● Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'extend')
2 | <div>Hello</div>
3 | </template>
> 4 |
| ^
5 | <script lang="ts">
6 | import Vue from 'vue'
7 | export default Vue.extend({
at src/pages/test.vue:4:1
at Object.<anonymous> (src/pages/test.vue:347:3)
at Object.<anonymous> (test/test.spec.ts:4:1)
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/#jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/#jest/core/build/cli/index.js:173:3)
files
test file(TypeScript):
import Vuetify from 'vuetify'
import { mount, createLocalVue } from '#vue/test-utils'
import test from '~/src/pages/test.vue'
const localVue = createLocalVue()
describe('Index', () => {
let vuetify: Vuetify
beforeEach(() => {
vuetify = new Vuetify()
})
test('is a Vue instance', () => {
const wrapper = mount(test, {
vuetify,
localVue,
})
expect(wrapper.vm).toBeTruthy()
})
})
jest.config.js:
module.exports = {
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js',
},
moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
transform: {
'^.+\\.ts$': 'ts-jest',
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
},
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/src/components/**/*.vue',
'<rootDir>/src/pages/**/*.vue',
],
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['./test/setup.js'],
moduleDirectories: [__dirname, 'node_modules']
}
setup.js:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
package.json:
"dependencies": {
"#babel/core": "^7.19.3",
"#nuxtjs/axios": "^5.13.6",
"consola": "^2.15.3",
"core-js": "^3.19.3",
"dotenv": "^16.0.2",
"eslint": "^8.22.0",
"eslint-plugin-import": "^2.26.0",
"nuxt": "^2.15.8",
"nuxt-typed-vuex": "^0.3.1",
"ts-loader": "8.2.0",
"typed-vuex": "^0.3.1",
"typescript": "^4.8.4",
"vue": "^2.7.10",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.6.10",
"vuex": "3.6.2",
"webpack": "^4.46.0"
},
"devDependencies": {
"#babel/eslint-parser": "^7.16.5",
"#nuxt/types": "^2.15.8",
"#nuxt/typescript-build": "^2.1.0",
"#nuxtjs/eslint-config-typescript": "^8.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/stylelint-module": "^4.1.0",
"#nuxtjs/vuetify": "^1.12.3",
"#types/jest": "^27.5.2",
"#types/node": "^18.7.18",
"#typescript-eslint/eslint-plugin": "^5.35.1",
"#typescript-eslint/parser": "^5.35.1",
"#vue/cli-plugin-unit-jest": "^5.0.8",
"#vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.5.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^8.2.0",
"husky": "^8.0.1",
"jest": "^27.5.1",
"lint-staged": "^12.1.7",
"postcss-html": "^1.3.1",
"prettier": "^2.7.1",
"stylelint": "^14.1.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-vue": "^1.1.0",
"stylelint-config-standard": "^24.0.0",
"ts-jest": "^27.1.5",
"vue-jest": "^3.0.7"
}
What do I have to do to run the test correctly?
I don't know how to solve this problem myself, as it worked fine when I ran the same code in other environments.
Thank you for your help.
Mh seems the Vue instance cannot be reached. I'm also using vuetify with jest test and it look quite same. Also same as in the documentation by vuetify here https://vuetifyjs.com/en/getting-started/unit-testing/#spec-tests
The only difference I see is that the createLocalVue() initialization is outside of describe() in your case.
Try it like
describe('Index', () => {
let vuetify: Vuetify
const localVue = createLocalVue()
...
Instead of
const localVue = createLocalVue()
describe('Index', () => {
let vuetify: Vuetify
...
I am using quasar for developing a vue app. I am using vue 3.0.7. I have installed jest and created the jest.config File.
The jest config file contains the following:
clearMocks: true,
moduleFileExtensions: [
"js",
"jsx",
"ts",
"vue"
],
testMatch: [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[tj]s?(x)"
],
transform: {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "vue-jest"
},
transformIgnorePatterns: [
"\\\\node_modules\\\\",
"\\.pnp\\.[^\\\\]+$"
],
I am writing the following test for a demo vue component:
import { shallowMount} from "#vue/test-utils"
import ComponentVueTest from "./ComponentVueTest"
describe('ComponentVueTest', ()=>{
test("Text shoudl be in the html" , () => {
let wrapper = shallowMount(ComponentVueTest);
expect(wrapper.html).toContain('JustTesting');
})
})
The component that is being tested:
<template>
JustTesting
</template>
<script>
import { defineComponent } from '#vue/composition-api'
export default defineComponent({
setup() {
},
})
</script>
<style>
</style>
and also the package.json dependencies:
"dependencies": {
"#quasar/extras": "^1.0.0",
"#typescript-eslint/eslint-plugin": "^4.29.1",
"#typescript-eslint/parser": "^4.29.1",
"#vue/composition-api": "^1.0.6",
"cordova": "^10.0.0",
"core-js": "^3.6.5",
"quasar": "^2.0.0",
"vue": "^2.6.14",
"vue-loader": "^16.5.0",
"vue-template-compiler": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.13.14",
"#babel/preset-env": "^7.15.0",
"#quasar/app": "^3.0.0",
"#quasar/quasar-app-extension-testing": "^1.0.3",
"#quasar/quasar-app-extension-testing-unit-jest": "^2.2.2",
"#vue/test-utils": "^2.0.0-rc.12",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-vue": "^7.0.0",
"eslint-webpack-plugin": "^2.4.0",
"jest": "^27.0.6",
"vue-jest": "^3.0.7"
},
When i run the npm run test ("test": "npx jest") i get the following error:
FAIL src/__tests__/Demo.spec.js
● Test suite failed to run
TypeError: Vue.defineComponent is not a function
> 1 | import { shallowMount} from "#vue/test-utils"
| ^
2 | import ComponentVueTest from "./ComponentVueTest"
3 |
4 | describe('ComponentVueTest', ()=>{
at Object.<anonymous> (node_modules/#vue/test-utils/dist/vue-test-utils.cjs.js:7856:26)
at Object.<anonymous> (src/__tests__/Demo.spec.js:1:1)
I have been trying for hours to fix it and can't seem to understand what is wrong
Try changing:
import { defineComponent } from '#vue/composition-api' to
import { defineComponent } from 'vue'
Also looks like you need to change your wrapper.html to wrapper.text() and add toMatch rather than toContain, that said the following should work:
import { shallowMount} from "#vue/test-utils"
import ComponentVueTest from "./ComponentVueTest"
describe('ComponentVueTest', ()=>{
test("Text should be in the html" , () => {
let wrapper = shallowMount(ComponentVueTest);
expect(wrapper.text()).toMatch('JustTesting');
})
})
The solution to unit testing vue3 in quasar v2 is to use #quasar/quasar-app-extension-testing-unit-jest. Just install it with
quasar ext add #quasar/quasar-app-extension-testing-unit-jest
and it should set up everything for you. Notice it is still in alpha and some components are not fully working yet(for me QPage wasn't working).
Hope this helps somebody :)
Im using react-native-paper within my own functional component.
I want to write Jest tests for my component.
Problem:
When I import my component to the Jest test file I receive this error:
TypeError: Cannot assign to read only property 'name' of function 'function () {for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {ar...<omitted>... }'
at node_modules/react-native-paper/src/core/withTheme.js:136:46
at Array.forEach (<anonymous>)
at withTheme (node_modules/react-native-paper/src/core/withTheme.js:124:5)
at Object.<anonymous> (node_modules/react-native-paper/src/components/Typography/Text.js:46:24)
at Object.<anonymous> (node_modules/react-native-paper/src/components/BottomNavigation.js:16:48)`
Trying to narrow the error I found out that even this simple Jest file will cause the error.
Reproducer
import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
describe('Unit Tests - Component:', () => {
it('s a test', () => {});
});
My package.json:
{
"name": "TodoList",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"prettier": "prettier --write '*.js'",
"format-code": "yarn run prettier && yarn run lint:fix",
"precommit": "lint-staged",
"test:coverage": "jest --coverage && open coverage/lcov-report/index.html"
},
"lint-staged": {
"*.js": ["yarn run format-code", "git add"]
},
"dependencies": {
"firebase": "^5.5.3",
"prop-types": "^15.6.0",
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-image-picker": "^0.26.7",
"react-native-keychain": "^3.0.0",
"react-native-paper": "^1.0.1",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "^1.5.12",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"yarn": "^1.9.4"
},
"devDependencies": {
"babel-eslint": "^8.2.2",
"babel-jest": "22.4.1",
"babel-preset-react-native": "^5.0.2",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"eslint": "^4.18.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"husky": "^0.14.3",
"jest": "22.4.2",
"jest-fetch-mock": "^2.1.0",
"lint-staged": "^7.2.2",
"prettier": "1.10.2",
"react-dom": "^16.7.0",
"react-test-renderer": "16.4.1",
"redux-mock-store": "^1.5.3"
},
"jest": {
"preset": "react-native",
"setupFiles": ["<rootDir>/tests/setup.js"],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"collectCoverageFrom": ["app/**/*.js", "!app/components/index.js"]
}
}
I faced the same issue for window.location.reload:
TypeError: Cannot assign to read only property 'reload' of object '[object Location]'
I did the following to make it work:
const reload = window.location.reload;
beforeAll(() => {
Object.defineProperty(window, 'location', {
value: { reload: jest.fn() }
});
});
afterAll(() => {
window.location.reload = reload;
});
it('my test case', () => {
// code to test the call to reload
expect(window.location.reload).toHaveBeenCalled();
});
Jest version: 26.6.3
react-scripts version: 4.0.1
Note
The issue appeared after upgrading to react-scripts version 4.0.1.
Solution:
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
describe('Unit Test', () => {
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
},
};
const props = {};
beforeEach(() => {
renderedComponent = renderer
.create(<PaperProvider theme={theme}>
<MyCompoment {...props} />
</PaperProvider>)
.toJSON();
// basic tests
it(`${componentName} renders successfully`, () => {
expect(renderedComponent).toBeTruthy();
});
}
I have a problem with importing vue-formio to my vue component.
Can't import FormBuilder without errors :(
After:
import { FormBuilder } from 'vue-formio';
I see in the console:
TypeError: Object prototype may only be an Object or null: undefined
Whole error You can see here: see print screen
TypeError: Object prototype may only be an Object or null: undefined
Main import:
if (document.body.classList.contains("hr:controller-requisition:action-edit")) {
require.ensure([], () => {
require("./views/requisition/edit.es6.js").default;
});
}
My formio.es6.js file:
import Vue from "vue";
import formio from "./show.vue";
import { store } from "HRComponets/store/store.es6";
export default new Vue({
el: "#formio-show",
data: {},
store,
render(h) {
return h(formio);
}
});
My vue component file:
Hi Guys, need help with vue-formio
<script>
import { FormBuilder } from 'vue-formio';
export default {
name: "formioShow",
data() {
return {
schema: {},
}
},
components: {
FormBuilder
},
};
</script>
My package.json file:
{
"name": "core",
"version": "1.0.0",
"description": "ortal",
"main": "index.js",
"directories": {
"test": "tests"
},
"scripts": {
"start": "npm run dev",
"prod": "webpack --config webpack.prod.js",
"dev": "webpack --watch --progress --config webpack.dev.js",
},
"nyc": {
"include": [
"src/**/*.(js|vue)"
],
"instrument": false,
"sourceMap": false
},
"keywords": [
"HR",
"Syrveys"
],
"browserslist": [
"> 2%",
"last 3 versions",
"not ie <= 8"
],
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.18",
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"expect": "^23.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"husky": "^1.0.0-rc.8",
"istanbul-instrumenter-loader": "^3.0.1",
"jsdom": "^11.11.0",
"jsdom-global": "^3.0.2",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.0",
"mocha": "^5.2.0",
"mocha-webpack": "^2.0.0-beta.0",
"node-sass": "^4.9.0",
"nyc": "^11.8.0",
"prettier-eslint": "^8.8.1",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"ts-loader": "^5.1.0",
"typescript": "^3.0.3",
"vue": "^2.5.16",
"vue-loader": "^15.0.10",
"vue-template-compiler": "^2.5.16",
"watchfile-webpack-plugin": "0.0.4",
"webpack": "^4.8.1",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2",
"webpack-notifier": "^1.6.0"
},
"dependencies": {
"amcharts3": "github:amcharts/amcharts3",
"eslint-plugin-vue": "^4.7.1",
"formiojs": "^3.5.1",
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"moment-timezone": "^0.5.17",
"npm": "^6.4.1",
"numeral": "^2.0.6",
"vee-validate": "^2.1.0-beta.8",
"vue-formio": "^3.0.0",
"vue-moment": "^4.0.0-0",
"vue-multiselect": "^2.1.0",
"vue-numerals": "0.0.2",
"vue-pdf": "^3.3.1",
"vue-upload-component": "^2.8.9",
"vue-wysiwyg": "^1.7.2",
"vue2-dropzone": "^3.2.2",
"vuelidate": "^0.7.4",
"vuenut": "^0.2.2",
"vuex": "^3.0.1",
"webpack-node-externals": "^1.7.2"
}
}
My webpack config file:
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const config = {
entry: {
core: "./src/AppBundle/VueComponents/main.es6.js",
hr: "./src/HRBundle/VueComponents/main.es6.js",
pm: "./src/PerformanceManagementBundle/VueComponents/main.es6.js"
},
output: {
filename: "[name]-app.js",
path: __dirname + "/web/assets/core/js/",
hotUpdateChunkFilename: "../webpack-hot-reload/hot-update.js",
hotUpdateMainFilename: "../webpack-hot-reload/Updatehot-update.json",
publicPath: "/assets/core/js/"
},
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: /node_modules/
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.ts$/,
exclude: /node_modules|vue\/src/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /.scss$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.less$/,
use: ["vue-style-loader", "css-loader", "less-loader"]
},
{
test: /\.es6.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HTMLWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
externals: {
jquery: "jQuery"
},
resolve: {
alias: {
vue: "vue/dist/vue.js",
HRComponets: path.resolve(__dirname, "./src/HRBundle/VueComponents")
},
extensions: ["*", ".js", ".vue", ".json", ".ts"]
}
};
module.exports = config;