Related
I get this error using webdriverio v7 and latest Percy for visual testing:
[0-2] Error in "0: I can see page "Product Detail Page of the last product""
TypeError: webdriverio_1.default is not a function
at C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\src\step_definitions\visual\visual-steps.ts:7:45
at Browser.call (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\webdriverio\build\commands\browser\call.js:43:16)
at Browser.runCommandWithHooks (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\wrapCommand.js:105:34)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at Browser.runCommandWithHooks (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\wrapCommand.js:100:24)
at Browser.wrapCommandFn (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\wrapCommand.js:67:44)
at World.<anonymous> (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\src\step_definitions\visual\visual-steps.ts:7:13)
at World.executeSync (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\index.js:38:22)
at C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\index.js:69:68
It doesn't even get to percy, so there is no screenshot there.
All I do in the code is taking screenshot of the page:
import percySnapshot from '#percy/webdriverio';
import { Then } from '#cucumber/cucumber';
Then(/^I can see page "([^"]*)"$/, (name: string) => {
browser.waitForPageToLoad();
browser.call(() => percySnapshot(name));
});
This is my package.json file:
"devDependencies": {
"#cucumber/cucumber": "^7.1.0",
"#percy/cli": "^1.0.0-beta.48",
"#percy/webdriverio": "^2.0.0",
"#types/chai": "^4.2.16",
"#types/node": "^14.14.41",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"allure-commandline": "^2.13.8",
"app-root-path": "^3.0.0",
"chai": "^4.3.4",
"eslint": "^7.24.0",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-prettier": "^3.4.0",
"husky": "^6.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1",
"ts-node": "^9.1.1",
"tsconfig-paths": "^3.9.0",
"typescript": "^4.2.4",
"webdriverio": "^7.4.6"
},
"dependencies": {
"#wdio/allure-reporter": "^7.4.2",
"#wdio/cli": "^7.4.6",
"#wdio/cucumber-framework": "^7.4.6",
"#wdio/local-runner": "^7.4.6",
"#wdio/selenium-standalone-service": "^7.4.2",
"#wdio/spec-reporter": "^7.4.3",
"#wdio/sync": "^7.4.6"
}
Note:
This used to work prior upgrading to webdriverIO v7 and percy v2.
Anybody has an idea how to solve it?
Thanks!
Discussed here github
I needed to add in tsconfig.json file these options:
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
Hello I'm new to vue and jest. I added jest to already existing vue project.
And I want get test coverage result from .js and .vue file.
But. It dosen't go well.
When I try run
vue-cli-service test:unit
Return below Error
Failed to collect coverage from D:\work\project\src\components\service\sidebar\partials\menu.vue
ERROR: Falsy value found in plugins
Here is my config files
.babelrc
{
"presets": [
["env"], "stage-2"
],
"plugins": ["dynamic-import-node"],
"comments": true
}
jset.config.js
module.exports = {
preset: '#vue/cli-plugin-unit-jest/presets/no-babel',
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
collectCoverage :true,
moduleFileExtensions: [
'js',
'json',
'vue'
],
transform: {
// process `*.vue` files with `vue-jest`
".*\\.(vue)$": "vue-jest",
// process js with `babel-jest`
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
collectCoverageFrom: [
'**/*.{js,vue}',
'!**/plugins/**',
'!src/main.js',
'!src/router/index.js',
'!**/node_modules/**'
]
}
package.json
{
"name": "web-application",
"version": "1.0.0",
"private": true,
"description": "web-application",
"author": "John",
"scripts": {
...
"test:unit": "vue-cli-service test:unit",
},
"dependencies": {
...
"copy-webpack-plugin": "^4.6.0",
"dotenv": "^8.1.0",
"element-ui": "^2.10.0",
"eslint-plugin-vue": "^5.2.3",
"fs": "0.0.1-security",
"log4js": "^5.0.0",
"lottie-web": "^5.5.5",
"pm2": "^3.5.1",
"recordrtc": "^5.5.8",
"request": "^2.88.0",
"sweetalert2": "^8.13.0",
"vue": "^2.6.10",
"vue-croppie": "^1.3.13",
"vue-drag-select": "^0.1.5",
"vue-izitoast": "^1.2.1",
"vue-moment": "^4.0.0",
"vue-raven": "^1.0.3",
"vue-router": "^3.1.3",
"vue-tilt.js": "^1.0.2",
"vue-toasted": "^1.1.27",
"vue2-scrollbar": "0.0.3",
"vuex": "^3.1.1"
},
"devDependencies": {
"#babel/preset-env": "^7.4.5",
"#vue/cli-plugin-unit-jest": "^4.2.3",
"#vue/cli-service": "^4.2.3",
"#vue/test-utils": "^1.0.0-beta.31",
"babel-core": "^6.25.0",
"babel-eslint": "^8.2.2",
"babel-jest": "^25.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"crypto-js": "^3.1.9-1",
"css-hot-loader": "^1.4.4",
"css-loader": "^1.0.1",
"es6-promise": "^4.2.8",
"eslint": "^4.19.1",
"eslint-config-prettier": "^6.5.0",
"eslint-config-vue": "^2.0.2",
"eslint-plugin-html": "^4.0.6",
"eslint-plugin-prettier": "^3.1.1",
"file-loader": "^1.1.11",
"file-saver": "^1.3.8",
"glob": "^7.1.4",
"html-loader": "^0.5.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"pkg": "^4.4.0",
"postcss-loader": "^2.0.6",
"sass-loader": "^7.1.0",
"secure-web-storage": "^1.0.2",
"style-loader": "^0.18.2",
"url-loader": "^1.1.2",
"vue-awesome-swiper": "^3.1.3",
"vue-axios": "^2.1.4",
"vue-i18n": "^8.11.2",
"vue-jest": "^3.0.5",
"vue-loader": "^14.2.2",
"webpack": "^4.39.3",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2",
"webpack-merge": "^4.2.1"
},
"bin": {
"app": "./server.js"
},
"lint": "eslint --ext .js,.vue src",
"pkg": {
"assets": [
"dist/**/*"
]
}
}
Please tell me if you need more information. I'll add it.
Thank you for read this question.
This is self answer. Well it was silly problem.
There are three problem
preset: '#vue/cli-plugin-unit-jest/presets/no-babel' in jest.config.js make transform option useless
removed
Jest 24 dosen't support babel 6.
it should be
babel-jest": "^23.6.0"
transform's location was wrong
it should be like
transform: {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
}
Now i fixed three problem. and working good.
I leave this answer because I want my shameful behavior to help others.
I try to use async/await on a js script (class method) in a webpack config but i have got this error :
search.js:33 Uncaught ReferenceError: regeneratorRuntime is not defined
I have maybe an error in the babelrc file but i tried all things found on the web :/
Stack : WSL1 node 10.16.3 npm 6.11.1 in Visual Studio Code.
Previously, i had polyfill config with a similar problem.
I tried to use new Babel recommandations with #babel/plugin-transform-runtime and #babel/runtime but the issue persists.
I tried to remove /node_modules/ directory and lock package files to generate it again with npm i but nothing changes.
I have no problem with an async function declaration (outside a class).
File with generated error
class Search {
constructor() {...}
async run() {
await this.xxxx();
}
xxxx() {...}
}
.babelrc
{
"presets": [
["#babel/preset-env"],
[
"#babel/env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
[ "#babel/plugin-transform-runtime", {"regenerator": true, "corejs": 3} ],
[ "#babel/plugin-transform-async-to-generator" ]
]
}
package.json
{
...
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-async-to-generator": "^7.5.0",
"#babel/plugin-transform-runtime": "^7.6.2",
"#babel/preset-env": "^7.6.3",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^2.0.2",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"fontmin-webpack": "^2.0.4",
"imagemin-gifsicle": "^6.0.1",
"imagemin-jpegtran": "^6.0.0",
"imagemin-optipng": "^7.0.0",
"imagemin-svgo": "^7.0.0",
"imagemin-webpack": "^5.1.0",
"jquery": "^3.4.1",
"loader": "^2.1.1",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-cli": "^6.1.2",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^7.3.1",
"style": "0.0.3",
"style-loader": "^0.23.1",
"sugarss": "^2.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7",
"webpack-manifest-plugin": "^2.0.4"
},
"dependencies": {
"#babel/runtime": "^7.6.3",
"core-js": "^3.3.2",
"detect-it": "^3.0.5",
"gifsicle": "^4.0.1",
"slick-carousel": "^1.8.1"
},
"browserslist": [
"last 2 versions"
]
}
I found the solution.
In the main js file
import "regenerator-runtime/runtime";
Add regenerator-runtime
npm i regenerator-runtime
Thanks.
I'm building a new project in VUEJS 2 and am having a issue. I'm fairly new to webpack so I'm learning it as I go. Can you tell me why this section of code throws an error?
./store/modules/user/store.js
const state = {
user: {}
};
Then when it gets compiled, webpack throws these errors:
ERROR Failed to compile with 1 errors 14:21:50
error in ./assets/js/store/modules/user/store.js
Module build failed: TypeError: Cannot read property 'bindings' of null
at Scope.moveBindingTo (c:\myProject\node_modules\#babel\traverse\lib\scope\index.js:978:13)
at BlockScoping.updateScopeInfo (c:\myProject\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:364:17)
at BlockScoping.run (c:\myProject\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:330:12)
at PluginPass.BlockStatementSwitchStatementProgram (c:\myProject\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:70:24)
at newFn (c:\myProject\node_modules\#babel\traverse\lib\visitors.js:237:21)
at NodePath._call (c:\myProject\node_modules\#babel\traverse\lib\path\context.js:65:20)
at NodePath.call (c:\myProject\node_modules\#babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (c:\myProject\node_modules\#babel\traverse\lib\path\context.js:100:12)
at TraversalContext.visitQueue (c:\myProject\node_modules\#babel\traverse\lib\context.js:142:16)
at TraversalContext.visitSingle (c:\myProject\node_modules\#babel\traverse\lib\context.js:102:19)
at TraversalContext.visit (c:\myProject\node_modules\#babel\traverse\lib\context.js:182:19)
at Function.traverse.node (c:\myProject\node_modules\#babel\traverse\lib\index.js:106:17)
at traverse (c:\myProject\node_modules\#babel\traverse\lib\index.js:76:12)
at transformFile (c:\myProject\node_modules\#babel\core\lib\transformation\index.js:116:29)
at runSync (c:\myProject\node_modules\#babel\core\lib\transformation\index.js:45:3)
at runAsync (c:\myProject\node_modules\#babel\core\lib\transformation\index.js:35:14)
at process.nextTick (c:\myProject\node_modules\#babel\core\lib\transform.js:34:34)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
# ./assets/js/store/store.js 3:0-40
# ./assets/js/main.js
Here is my package.json
{
"devDependencies": {
"#symfony/webpack-encore": "^0.17.0",
"#vue/cli-plugin-babel": "^3.0.0-rc.3",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.2.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.3",
"vue-loader": "^14.1.1",
"vue-template-compiler": "^2.5.16"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production"
},
"dependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.0.0-beta.51",
"#coreui/coreui": "^2.0.3",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"#coreui/icons": "0.2.0",
"#coreui/vue": "^2.0.0-rc.0",
"axios": "^0.18.0",
"bootstrap": "^4.1.1",
"bootstrap-vue": "^2.0.0-rc.11",
"chart.js": "^2.7.2",
"core-js": "^2.5.7",
"css-vars-ponyfill": "^1.7.2",
"flag-icon-css": "^3.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"npm": "^6.4.0",
"perfect-scrollbar": "^1.4.0",
"simple-line-icons": "^2.4.1",
"sweetalert2": "^7.26.11",
"vue": "^2.5.16",
"vue-chartjs": "^3.3.2",
"vue-perfect-scrollbar": "^0.1.0",
"vue-router": "^3.0.1",
"vue-table-component": "^2.0.0-alpha.1",
"vue-tables": "^1.6.44",
"vuetable": "^1.5.12",
"vuex": "^3.0.1"
}
}
I'm assuming i'm missing some sort of babel extension. I've done some research and think it might be something to do with es2015 not being understood in the "store.js" file. Any idea on what I could do fix this? I also noticed I don't have a .babelrc file, is there something I need to put in that so this will work?
I appreciate any help!
I fixed it by just reverting to react-native#0.55.4 for now.I'm also faced error by using (react-native#0.56)#babel/core 7.0.0-beta.
I'm getting this error after updating react-native to "^0.56.0":
bundling failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/ben/vepo/frontend/node_modules/babel-preset-flow/lib/index.js
I tried to do something similar to the highest voted answer here but instead for babel-preset-flow:
https://github.com/babel/babel-loader/issues/540
.babelrc:
"presets": ["react-native", "flow", "#babel/preset-flow"]
package.json
{
"name": "vepo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./app/fonts"
]
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
},
"dependencies": {
"#babel/preset-flow": "^7.0.0-beta.52",
"#babel/preset-react": "^7.0.0-beta.52",
"babel-preset-react-native": "^4.0.0",
"flow-typed": "^2.4.0",
"generator-rn-toolbox": "^2.2.0",
"imagemagick": "^0.1.3",
"immutable": "4.0.0-rc.9",
"metro-bundler": "^0.22.1",
"native-base": "^2.3.3",
"prop-types": "^15.5.10",
"react": "16.3.1",
"react-native": "^0.56.0",
"react-native-aws3": "^0.0.8",
"react-native-blur": "^3.1.3",
"react-native-communications": "^2.2.1",
"react-native-drawer": "^2.3.0",
"react-native-fbsdk": "facebook/react-native-fbsdk#065507a",
"react-native-git-upgrade": "^0.2.7",
"react-native-image-picker": "^0.26.7",
"react-native-interactable": "^0.1.2",
"react-native-mail": "^3.0.2",
"react-native-maps": "^0.16.4",
"react-native-modal": "^2.3.2",
"react-native-modalbox": "^1.3.9",
"react-native-multiple-choice": "^0.0.8",
"react-native-navigation": "^1.1.100",
"react-native-off-canvas-menu": "^0.1.31",
"react-native-optimized-flatlist": "^1.0.1",
"react-native-redux-router": "^1.0.7",
"react-native-select-multiple": "^1.0.3",
"react-native-side-menu": "^0.20.1",
"react-native-vector-icons": "^4.4.0",
"react-navigation": "^1.0.0-beta.11",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-immutable": "^4.0.0",
"redux-observable": "^0.14.1",
"reselect": "^3.0.0",
"rxjs": "^5.2.0",
"yarn": "^1.3.2",
"yoga": "^0.0.0"
},
"devDependencies": {
"adm-zip": "^0.4.7",
"babel-cli": "^6.26.0",
"babel-eslint": "^7.1.1",
"babel-plugin-module-resolver": "^2.7.0",
"eslint": "^3.17.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-flowtype": "^2.30.3",
"eslint-plugin-jsx": "^0.0.2",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-react-native": "^2.3.1",
"flow-bin": "^0.72.0",
"plist": "^2.1.0",
"react-devtools": "^3.2.1",
"react-test-renderer": "~15.4.1",
"redux-devtools": "^3.3.2",
"remote-redux-devtools": "^0.5.7",
"remotedev-server": "^0.2.4",
"xcode": "^1.0.0"
}
}
Nothing is working. Any ideas?
EDIT: there is no node_modules/babel-preset-flow folder at all
I had the same error and resolved it by uninstalling babel-preset-flow and installing #babel/preset-flow. I believe this is due to React Native 56 using Babel 7. And add to .babelrc
{
"presets": ["#babel/preset-flow"]
}
Upgrade your babel-preset-react-native dependency.
"babel-preset-react-native": "^5",
You don't need to have #babel/preset-react or #babel/preset-flow installed.
Hope this helps.
Open .babelrc file and then edit the presets section of the code as follows:
"presets": ["module:metro-react-native-babel-preset"],
I solved this issue by installing "babel-preset-react-native-stage-0" in my project and changed .babelrc file:
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
]
for Babel 7 and above and according to this document create a file with name bable.config.js instead of .babelrc and then export presets like this :
const presets = [
"flow"
]
module.exports = {presets}