У меня есть проект с использованием Vue.js, Jest и т. Д.
Я обновил webpack до 4 и Babel до 7 и после этого столкнулся с множеством проблем с локальным созданием и выполнением тестов, но в конце концов исправилих.
Однако, когда я отправляю свои изменения и запускаю тесты на CI, я получаю следующие ошибки:
Test suite failed to run
Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
at throwVersionError (node_modules/@babel/helper-plugin-utils/lib/index.js:65:11)
at Object.assertVersion (node_modules/@babel/helper-plugin-utils/lib/index.js:13:11)
at node_modules/@babel/plugin-transform-runtime/lib/index.js:86:7
at node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
at Array.map (<anonymous>)
at compileBabel (node_modules/vue-jest/lib/compilers/babel-compiler.js:12:21)
at processScript (node_modules/vue-jest/lib/process.js:27:10)
at Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:49:18)
at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:453:35)
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:523:40)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
at Object.<anonymous>.
package.json
"scripts": {
"dev": "webpack-dev-server --https --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"jest": "jest --colors --coverage test",
"test": "npm run jest",
"lint": "eslint --ext .js,.vue src test/unit",
"lint-fix": "eslint --fix --ext .js,.vue src test/unit",
"build": "node build/build.js"
},
"dependencies": {
"@babel/cli": "^7.6.2",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/runtime": "^7.6.2",
"@vue/babel-preset-app": "^3.11.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.27",
"core-js": "^2.6.9",
"vue": "^2.6.10",
"vue-cookies": "^1.5.13",
"vue-resource": "^1.5.1"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/node": "^7.6.2",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/polyfill": "^7.6.0",
"@babel/preset-env": "^7.6.2",
"@babel/register": "^7.6.2",
"@vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^7.1.2",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"glob-all": "^3.1.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"jest-serializer-vue": "^0.3.0",
"mini-css-extract-plugin": "^0.8.0",
"node-notifier": "^5.1.2",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"purgecss-webpack-plugin": "^1.6.0",
"regenerator-runtime": "^0.13.3",
"rimraf": "^2.6.0",
"sass-loader": "^8.0.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.4.0",
"vue-loader": "^14.2.2",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^4.5.0",
"webpack-bundle-analyzer": "^3.5.2",
"webpack-bundle-tracker": "^0.4.2-beta",
"webpack-cli": "3.3.1",
"webpack-dev-server": "^3.8.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 10.0.0",
"npm": ">= 6.0.0"
},
"browserslist": [
"> 1%",
"last 4 versions",
"not ie <= 8",
"ie >= 11"
],
"jest": {
"testURL": "http://localhost/",
"moduleFileExtensions": [
"js",
"json",
"jsx",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
"^.+\\.js$": "babel-jest",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
}
}
babel.config. js
module.exports =
{
"presets":
[
[
"@vue/babel-preset-app",
{
"modules": "commonjs",
"targets":
{
"browsers": ["> 1%", "last 4 versions", "not ie <= 8", "ie >= 11"]
}
}
]
],
"plugins": ['@babel/plugin-transform-regenerator', '@babel/plugin-transform-runtime'],
"env": {
"test": {
"presets": [
[
"@vue/babel-preset-app",
{
"modules": "commonjs",
"targets": {"node": "current"}
}
]
]
}
}
}
.gitlab-ci.yml
stages:
- test
job test:
stage: test
script:
- apt-get update
- apt-get install -y curl software-properties-common
- curl -sL https://deb.nodesource.com/setup_12.x | bash -
- apt-get install -y nodejs build-essential
- node -v
- npm -v
- npm install
- npm run lint
- npm run test
версий на сервере
$ node -v
v12.10.0
$ npm -v
6.10.3
Почему это будет работать локально ине на CI? Что-то не так в конфигурации?