How to configure jest and babel to work with vue? - vue.js

I'm adding jest to my project and can't configure it properly.
When I run $ jest I'm getting a SyntaxError: Cannot use import statement outside a module.
I've searched for quite a while for a solution but none worked...
Can someone please help me config jest and babel?
Here are my files:
package.json
{
"name": "psyque-frontend",
"version": "1.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"actioncable-vue": "^1.5.1",
"axios": "^0.19.2",
"chart.js": "^2.9.3",
"material-design-icons-iconfont": "^5.0.1",
"qs": "^6.9.1",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-chartjs": "^3.5.0",
"vue-router": "^3.1.6",
"vuetify": "^1.5.21",
"vuetify-datetime-picker": "^1.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-eslint": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"#vue/test-utils": "^1.0.0-beta.32",
"babel-eslint": "^10.1.0",
"babel-jest": "^25.1.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"jest": "^25.1.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.1",
"ts-jest": "^25.2.1",
"vue-cli-plugin-vuetify": "^0.6.3",
"vue-jest": "^3.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.4.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
jest.config.js
module.exports = {
moduleFileExtensions: ['js', 'json', 'ts', 'vue'],
transform: {
'.*\\.(js|jsx)$': 'babel-jest',
'.*\\.(ts|tsx)?$': 'ts-jest',
'.*\\.(vue)$': 'vue-jest'
},
verbose: true
};
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
};
Footer.test.js
import { mount } from '#vue/test-utils'
import Footer from './Footer'
describe('Footer', () => {
test('is a Vue instance', () => {
const wrapper = mount(Footer);
expect(wrapper.isVueInstance()).toBeTruthy();
})
});
Thank you very much for your support!

Related

Vue2 with pinia fails to start instance

I decided to use Pinia with my vue2 project but it fails once I load the page.
Error:
TypeError: Object(vue_demi__WEBPACK_IMPORTED_MODULE_0__["effectScope"]) is not a function. (In 'Object(vue_demi__WEBPACK_IMPORTED_MODULE_0__["effectScope"])(true)', 'Object(vue_demi__WEBPACK_IMPORTED_MODULE_0__["effectScope"])' is an instance of Object)
createPinia — pinia.mjs:955
packages.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"chart.js": "^3.9.1",
"core-js": "^3.6.5",
"datatables.net": "^1.11.3",
"datatables.net-dt": "^1.11.3",
"driver.js": "^0.9.8",
"jquery": "^3.6.0",
"pdfjs-dist": "2.15.349",
"pinia": "^2.0.22",
"vue": "^2.6.11",
"vue-chartjs": "^4.1.1",
"vue-tour": "^1.5.0",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11",
"webpack-bundle-tracker": "^1.6.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-unused-vars": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
js entrypoint
import Vue from 'vue'
import myapp from './myapp.vue'
import { PiniaVuePlugin,createPinia } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia(); // <-- this is the problem
new Vue({
pinia,
render: (h) => h(myapp)
}).$mount("#myapp");

Getting a "TypeError: Invalid PostCSS Plugin found at: plugins[0]" whenever I try to build my css file using postcss and tailwind

Alright so my project used to work fine but ever since I updated to the latest version of tailwindcss and postcss, its giving me the above error.
Error TypeError: Invalid PostCSS Plugin found at: plugins[0]
My package.json file:
{
"name": "aniko",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"css": "postcss src/assets/css/tailwind.css -o src/assets/css/styles.css",
"start": "node server.js"
},
"dependencies": {
"#tailwindcss/aspect-ratio": "^0.2.0",
"#tailwindcss/line-clamp": "^0.2.1",
"#tailwindcss/postcss7-compat": "^2.2.17",
"#vue/cli": "^4.5.13",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"cors": "^2.8.5",
"dotenv": "^9.0.0",
"epic-spinners": "^1.1.0",
"express": "^4.17.1",
"mal-scraper": "^2.7.1",
"moment": "^2.29.1",
"node-fetch": "^2.6.0",
"postcss": "^7.0.32",
"postcss-cli": "^7.1.1",
"vue": "^2.6.11",
"vue-progressbar": "^0.7.5",
"vue-toasted": "^1.1.28"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^2.3.0",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"autoprefixer": "^9.8.8",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"tailwindcss": "^3.1.6",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
My tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
// Example content paths...
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
darkMode: "class",
theme: {
extend: {},
},
plugins: [],
}
My postcss.config.js file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
I have tried reinstalling everything and even switching back to the previous version but the error still persists.
How can I solve this?

when i am trying to run test cases it shows me shallowMount error,How to fix ShallowMount error in VUE.JS?

i am wrighting test cases for LoginNew.vue component , when i am trying to import that component inside the spec.js file i am getting shallowMount error [check my error here] ,i don't know why i am getting this error please help me to fix this issue
jest.config.js
module.exports = {
moduleNameMapper:{
"~(.*)$": "<rootDir>/resources/js/$1",
},
setupFilesAfterEnv: ['<rootDir>resources/src/tests/setup.js'],
resolver: require.resolve(`jest-pnp-resolver`),
testEnvironment: `node`,
};
LoginNew.vue
<template>
<div>
<h1 id="title">Login</h1>
<input type="text" id="input-username"/>
<input type="password" id="input-password"/>
<button id="btn-sign-in">Sign In</button>
</div>
</template>
<script>
export default {
name: 'LoginNew'
}
</script>
Login.spec.js
import LoginNew from '../../src/Pages/LoginNew.vue';
import{shallowMount} from '#vue/test-utils';
describe('LoginNew.vue',()=>{
describe('When Loaded',()=>{
it('has the required elements',()=>{
const wrapper =shallowMount(LoginNew);
expect(wrapper.find('#input-username').exists()).toBe(false);
expect(wrapper.find('#input-password').exists()).toBe(false);
});
});
});
package.json
{
"name": "vue-fundoo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"#vue/composition-api": "^1.0.0-rc.9",
"#vuelidate/core": "^2.0.0-alpha.18",
"#vuelidate/validators": "^2.0.0-alpha.15",
"axios": "^0.21.1",
"bootstrap": "^5.0.1",
"core-js": "^3.6.5",
"dotenv": "^10.0.0",
"jquery": "^3.6.0",
"vue": "^2.6.11",
"vue-axios": "^3.2.4",
"vue-router": "^3.5.1",
"vue-template-compiler": "^2.6.12",
"vuelidate": "^0.7.6"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/test-utils": "^1.2.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.0.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"jest": "^27.0.3",
"node-sass": "^5.0.0",
"sass": "^1.19.0",
"sass-loader": "^10.1.1",
"vue-jest": "^3.0.7",
"vue-test-utils": "^1.0.0-beta.11",
"webpack": "^4.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"jest": {
"transform": {
"^.+\\.vue$": "vue-jest",
"^.+\\.js$": "babel-jest"
}
}
}
Update the jest configuration to
testEnvironment: 'jsdom'
The defaults has been changed for Jest 27
Read more about it here.
https://jestjs.io/blog/2021/05/25/jest-27

How to add UglifyJS to a VueJS project

I need to add UglifyJS to a VueJS CLI 3 project.
My vue.config.js:
var webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...
optimization: {
minimizer: [new UglifyJsPlugin()],
},
publicPath: "./",
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
This is the error message I get after trying to run npm run build.
Invalid options in vue.config.js: "optimization" is not allowed.
"plugins" is not allowed
I tried updating all packages and install the webpack UglifyJS plugin.
package.json
{
"name": "app",
"version": "0.1.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"firebase": "^6.3.0",
"material-icons": "^0.3.1",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-flickity": "^1.1.2",
"vue-router": "^3.0.3",
"vuetify": "^1.5.5",
"vuex": "^3.0.1"
},
"devDependencies": {
"#mdi/font": "^3.8.95",
"#vue/cli-plugin-babel": "^3.8.0",
"#vue/cli-plugin-eslint": "^3.8.0",
"#vue/cli-plugin-pwa": "^3.8.0",
"#vue/cli-service": "^3.8.0",
"#vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"material-design-icons-iconfont": "^5.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.0.5",
"webpack": "^4.40.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/prettier"
],
"rules": {"no-console": "off"},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
How to add UglifyJS to the VueJS project?

Installing jest & vue test utils manually no - trouble with import

I am trying to install vue-test-utils and jest in a project. It is vue-cli project but I did not setup the testing when I ran it initially.
It finds the test but fails on the import statements.
Here is the error.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
It is almost certainly a babel thing (I think) but I cannot work it out.
Here are the config files.
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
jest.config.js
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest',
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
transformIgnorePatterns: [
'/node_modules/'
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/'
}
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-moment": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#vue/cli-plugin-babel": "^3.6.0",
"#vue/cli-plugin-eslint": "^3.6.0",
"#vue/cli-service": "^3.6.0",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.7.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"jest": "^24.7.1",
"jest-transform-stub": "^2.0.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.30.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Well, looks like you need global section in your jest config. I'm using vue + ts, so my globals looks like that:
globals: {
'ts-jest': {
babelConfig: true
}
}