Related
I learn yalc and do exactly what it say but when I change the library code that I have done yalc publish on, I can't see the code changes in my app.
The library is notistack
Steps:
yalc publish in the notistack
I then run yalc add notistack in my App or yalc link notistack
When I then change the notistack code and run yalc push then nothing happens but docs say I should get the code change in my app?
I even restart the App server and do the yalc update notistack but the notistack code changes is not visible.
The strange thing is in my app VSCode node_modules I see the notistack code changes. It's like the yalc push is propagating the notistack changes to the app but the app is not using them.
It's even more strange that when I restart VSCode and start the App Server to do debugging the old notistack code is still used.
I test to remove the yalc remove notistack and restart laptop and then do again yalc add notistack. I then see the old code again.
I tried in Chrome Browser to do hard reset empty cashes but no luck getting this to work.
When I go and look in yalc Store:
C:\Users\user\AppData\Local\Yalc\packages\notistack\1.0.10\src:
I see the latest code.
In Chrome Inspector Console I see old code but under Inspector source the correct code is there. This is so confusing. I can't set breakpoints either, not in Inspector or in VSCode, breakpoints in the notistack. It's like the JavaScript files are dislocated.
This happens in both Edge and Chrome.
What I do now after two days to be able to continue work I must delete that Yalc store folder,,C:\Users\user\AppData\Local\Yalc\packages\noti...............
deleted yalc.lock in app project
delete package-lock.json and node_modules
Then start over publishing and adding the notistack. It's time-consuming but works.
How can I make code changes show in Yalc?
package.json for notistack
{
"name": "notistack",
"version": "1.0.10",
"description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
"main": "src/index.js",
"module": "dist/notistack.esm.js",
"types": "src/index.d.ts",
"license": "MIT",
"author": {
"name": "Hossein Dehnokhalaji",
"email": "hossein.dehnavi98#yahoo.com",
"url": "https://github.com/iamhosseindhv/notistack"
},
"homepage": "https://www.iamhosseindhv.com/notistack",
"repository": {
"url": "git+https://github.com/iamhosseindhv/notistack.git",
"type": "git"
},
"scripts": {
"build": "tsdx build --transpileOnly --entry ./src/index.js",
"prebuild": "npm run docs",
"prepublishOnly": "npm run build",
"docs": "rimraf typedoc.json && typedoc --tsconfig",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"peerDependencies": {
"#material-ui/core": "^4.0.0",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
},
"dependencies": {
"clsx": "^1.1.0",
"hoist-non-react-statics": "^3.3.0"
},
"bugs": {
"url": "https://github.com/iamhosseindhv/notistack/issues"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/notistack"
},
"contributors": [
"Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
],
"keywords": [
"notistack",
"enqueueSnackbar",
"snackbarprovider",
"useSnackbar",
"multiple",
"react",
"javascript",
"material-ui",
"toast",
"redux",
"snackbar",
"stacked",
"notification",
"material design",
"hossein",
"dehnokhalaji",
"iamhosseindhv"
],
"yalcSig": "073ef039ed1e473029c88b6ad9af16d9"
}
UPDATE
Adding App package.json
{
"name": "greta-thunberg-fff",
"version": "1.2.9",
"private": true,
"homepage": "https://greta.portplays.com",
"main": "index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/styles": "^4.11.2",
"axios": "^0.19.2",
"bootstrap": "^4.5.2",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
"clean-tag": "^3.1.1",
"clsx": "^1.1.1",
"comma-separated-values": "^3.6.4",
"crypto-js": "^4.0.0",
"date-fns": "^2.23.0",
"faker": "^5.5.3",
"firebase": "^7.23.0",
"formik": "^2.2.5",
"framer-motion": "^2.9.5",
"gsap": "^3.5.1",
"history": "^5.0.0",
"i": "^0.3.6",
"lodash": "^4.17.19",
"lodash.debounce": "^4.0.8",
"mammoth": "^1.4.11",
"material-table": "^1.69.2",
"moment": "^2.27.0",
"my-notistack-fork": "file:.yalc/my-notistack-fork",
"normalize-wheel": "^1.0.1",
"npm": "^7.11.2",
"pdfjs-dist": "^1.8.357",
"preval.macro": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-activity": "^1.2.2",
"react-bootstrap": "^1.3.0",
"react-chartjs-2": "^2.11.1",
"react-data-grid": "^6.1.0",
"react-detect-offline": "^2.4.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-helmet": "^6.1.0",
"react-motion": "^0.5.2",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.5",
"react-resize-detector": "^5.0.7",
"react-router": "^6.0.0-beta.4",
"react-router-dom": "^6.0.0-beta.4",
"react-scripts": "^3.4.0",
"react-slick": "^0.27.3",
"react-spring": "^8.0.27",
"react-transition-group": "^4.4.1",
"react-visibility-sensor": "^5.1.1",
"rebass": "^4.0.7",
"recompose": "^0.30.0",
"redux": "^4.1.1",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"sass": "^1.41.1",
"simplebar-react": "^2.3.5",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.1",
"styled-system": "^5.1.5",
"three": "^0.85.2",
"typescript": "^3.9.7",
"uuid": "^8.3.1",
"xlsx": "^0.10.1",
"yup": "^0.32.1"
},
"scripts": {
"start": "set PORT=6545&& react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.1.1",
"#typescript-eslint/parser": "^4.1.1",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"clean-tag": "^3.1.1",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.2",
"gh-pages": "^2.0.1",
"prettier": "^2.1.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "^3.4.3",
"rebass": "^4.0.7",
"styled-system": "^5.1.5"
}
}
If I understood correctly everything, I see two problems:
forking an npm package
working simultaneously with two packages
First of all I have to admit I do not know yalc but after taking a quick look to it, I would say it seems to work as npm does; I'll provide my answer with npm, I leave up to you to adapt my answer using yalc; but I'm pretty sure it's just matter of running the yalc command rather than the npm one, using the same parameters.
1. forking an npm package
If I understood correctly you are not the author of notistack, you have your own fork of it, but I still not understood its name.
Could it be you forked notistack and you didn't changed its name?
So, when we want to fork a package we need to give it a new name, let's say my-notistak-fork; the package.json file should seems something like:
{
"name": "my-notistack-fork",
"version": "new version progression numbers",
"license": "MIT",
"author": {
... describe yourself
},
"homepage": "a new homepage, if you have one",
"repository": {
"url": "URL of your fork"
},
"bugs": {
"url": "URL of issues in your fork"
},
"funding": {
... if you have one, describe it
},
"contributors": [
... who contribute to your fork
],
...
}
I wrote only the filed which needs to be changed, the others could be left untouched (but this depends on how much you change the package, anyway this is another topic).
Publish it with npm publish command.
Now you have published my-notistack-fork which is a clone of notistack (at version you forked it).
2. working simultaneously with two packages
With npm this is something trivial and it works very well.
In the root directory of your local cloned my-notistack-fork repository issue the npm link command.
In the root directory of your local app server repository issue the following commands:
npm add my-notistack-fork
npm link my-notistack-fork
npm install
That's all. Now changing files in each of the two repositories should immediately reflect on your debugging/development environment.
Probably cleaning the root directory of your local app server repository before doing that could be a good idea. I mean:
removing the node_modules directory
removing any lock file (package-lock.json and/or the yalc one)
removing any reference to notistack from you package.json file
I replicated your setup using yalc add notistack and noticed that yalc push doesn't compile the package. It worked when I added the flag --scripts as described in the docs:
scripts options is false by default, so it won't run pre/post scripts (may change this with passing --scripts flag).
You can also run yalc publish and then yalc push, or yalc publish --push
For the changes to take effect in the app, I had to run npm start again.
This is how the notistack dependency looks in the package.json
"notistack": "file:.yalc/notistack",
UPDATE
As you pointed out, I also tried renaming the package to my-notistack-fork by changing the name in package.json
{
"name": "my-notistack-fork",
"version": "2.0.2",
"description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
then removing the notistack dependency in my app with yalc remove notistack and adding it again with the new name yalc add my-notistack-fork. After that I made changes to the lib code and ran yalc publish --push and I could see them reflected when running again the app. The dependency looks like this
"my-notistack-fork": "file:.yalc/my-notistack-fork",
Interesting that, for me, in the app node_modules, the lib directory has compiled files, and the error in your screenshot has an src dir which gives the impression that it is uncompiled
Personally this fixed it for me:
yalc publish --push will publish your package to the store and propagate all changes to existing yalc package installations (this will actually do update operation on the location).
The short-hand for the above is yalc push. Personally I use:
yalc push --scripts --update --replace
According to the docs, this:
runs pre/post scripts
force replaces the package contents
runs yarn update
I made this a script on the package.json of the library I was testing:
{
"scripts": {
"yalc:update": "yalc push --scripts --update --replace"
}
}
Either
yalc publish --push
or
yalc push --script
should work. In eariler yalc version, yalc push also works.
I came here try to find out why yalc push doesn't equivalent to yalc publish --push right now, but didn't get a clear answer.
My colleage said his behaviour is as expected while I'm not. His version is 1.0.0-pre.50 and Mine is latest 1.0.0-pre.53.
I then understand what happened and goes to check the source code and found that, yalc changed the default value of parameter --scripts to yalc push from true to false at 4/7/2021, after 1.0.0-pre.50 was released (1/19/2021). This is why before version 1.0.0-pre.50 (and including), yalc push equivalent to yalc publish --push, but after that version, you need to use yalc push --script.
Reusing code between react-native and react-native-web is fairly well documented. Reusing code between next.js and react-native-web works perfectly thanks to "create-next-app --example with-react-native-web project_name".
I am trying to reuse code between react-native and next.js, which is a little different. Next.js hides all of its webpack / babel manipulations and I suspect that's where the issues arise.
I created a RN project with "react-native init rn1" and a separate project with "create-next-app --example with-react-native-web nj1"
I carefully copied the nj1 folders to the rn1 project, including hidden folder ".next", then carefully merged the package.json files to make sure the "scripts" don't collide and the dependencies are correct.
The command "react-native run-ios" correctly builds and starts up the simulator. Running "react-native run-android" works flawlessly also.
The problems arise when I try to run the Next.js project with "npm run dev" in which case I get:
Failed to compile.
./node_modules/next/dist/client/next-dev.js 34:6
Module parse failed: Unexpected token (34:6)
You may need an appropriate loader to handle this file type.
|
|
> import('./noop');
| var _window = window,
| assetPrefix = _window.__NEXT_DATA__.assetPrefix;
Has anyone faced this issue before?
The package.json resulting from merging both project folders looks like this:
{
"name": "testweb7",
"version": "0.0.1",
"private": true,
"scripts": {
"rn-start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"babel-plugin-module-resolver": "^3.1.2",
"next": "^8.0.3",
"react": "16.6.3",
"react-native": "0.58.6",
"react-art": "^16.5.2",
"react-dom": "^16.6.3",
"react-native-web": "^0.9.3"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.3.1",
"jest": "24.3.1",
"metro-react-native-babel-preset": "0.53.0",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
Thank you for reading!
The app installs and opens but right when it opens this red screen appears with the below error message.
TBH I am not quite sure what I am doing and I really need some help. I was able to get my other project to work but when I started my second project this came up when trying to run the code. The code is just the basic code you get when you run: react-native init projectName
Change the version of "babel-preset-react-native" to "4.0.0". For the lastest version 5.0.0, the issue arises.
Run npm install after the version change. Then start the emulator.
Even then if you face issue, delete your node_modules directory, repeat step 1.
Restart your machine if you see the issue again even after all tries.
Check github issue
I got the above mentioned error just now. I am using React Native v0.57 and my json file had this
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.1"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.45.6",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
I added "babel-preset-react-native": "4.0.0", and removed "metro-react-native-babel-preset": "0.45.6" in the "devDependencies" and the error was resolved.
Jonathan's solution worked for me as well:
Fixed. babel pushed an update that pushed to 5.0.0. set your presets to 4.0.0 and it will fix it.
https://github.com/facebook/react-native/issues/18962
I have upgraded to
"react-native": 0.57.7
"metro-react-native-babel-preset": "0.48.5",
Now the bundle is loading as expected.
My current version:
"react-native": "0.57.8",
"metro-react-native-babel-preset": "0.51.1",
Here how I fixed:
add
"devDependencies": {
"babel-preset-react-native": "4.0.0"
},
remove node_modules
npm install
Voilà! It works!
Fixed. babel pushed an update that pushed to 5.0.0. set your presets to 4.0.0 and it will fix it.
https://github.com/facebook/react-native/issues/18962
^^ what they said... change your "babel-preset-react-native" to 4.0.0 .
Try this command
react-native upgrade
Had the same issue. Downgrading to "babel-preset-react-native": "4.0.0", did not work.
running this worked for me
npm add #babel/runtime
Try the followings:
clean the build folder and try again.
run react-native start --reset-cache in one tab
and then
run react-native in another tab
For me this answer worked:
https://stackoverflow.com/a/40966360/4483716
Basically I needed to give permission to folder
/Users/[username]/Library/LaunchAgents.
Use this command:
$ sudo chown $(whoami) /Users/$(whoami)/Library/LaunchAgents
Add babel-preset-react-native version 4.0.0 to your devDependencies in package.json
"devDependencies": {
"babel-preset-react-native": "4.0.0"
},
npm install
react-native run-ios or android
If it still doesn't work try rm -rf node_modules/ and redo step 2 & 3
I used Reactjs and webpack to start a project, and when I run the "node server" in the command prompt, there is an error like this:
And the chrome explorer opened successful but also have problems as follows:
The github is: (github.com/Yangqin0607/gallery)
Here is the package.json
{
"private": true,
"version": "0.0.1",
"description": "YOUR DESCRIPTION - Generated by generator-react-webpack",
"main": "",
"scripts": {
"clean": "rimraf dist/*",
"copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
"dist": "npm run copy & webpack --env=dist",
"lint": "eslint ./src",
"posttest": "npm run lint",
"release:major": "npm version major && npm publish && git push --follow-tags",
"release:minor": "npm version minor && npm publish && git push --follow-tags",
"release:patch": "npm version patch && npm publish && git push --follow-tags",
"serve": "node server.js --env=dev",
"serve:dist": "node server.js --env=dist",
"start": "node server.js --env=dev",
"test": "karma start",
"test:watch": "karma start --autoWatch=true --singleRun=false"
},
"repository": "",
"keywords": [],
"author": "Your name here",
"devDependencies": {
"babel-core": "^6.0.0",
"babel-eslint": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.5.0",
"bower-webpack-plugin": "^0.1.9",
"chai": "^3.2.0",
"copyfiles": "^1.0.0",
"css-loader": "^0.23.0",
"eslint": "^3.0.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^6.0.0",
"file-loader": "^0.9.0",
"glob": "^7.0.0",
"isparta-instrumenter-loader": "^1.0.0",
"karma": "^1.0.0",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.0.0",
"karma-mocha": "^1.0.0",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.7.0",
"minimist": "^1.2.0",
"mocha": "^3.0.0",
"null-loader": "^0.1.1",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.0.0",
"react-addons-test-utils": "^15.0.0",
"react-hot-loader": "^1.2.9",
"rimraf": "^2.4.3",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.12.0"
},
"dependencies": {
"core-js": "^2.0.0",
"normalize.css": "^4.0.0",
"react": "^15.0.0",
"react-dom": "^15.0.0"
}
}
This issue is related to the react-hot-loader package. You are using an old version that relies on the ReactMount.js file being present in the node_modules/react/lib folder.
There is no easy one way fix for that but you have a few options which are:
Try to follow the instructions here: https://github.com/gaearon/react-hot-loader/blob/v3.0.0-beta.6/docs/README.md#usage-with-external-react (but I have been unlucky so far)
Remove the hot reloader for react (in your webpack.config remove the 'react-hot' loader)
Update the react-hot-loader package to version 3 (here is how to do so: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915). But note that this package has been in alpha for a while now...
Rollback your react version to one that includes the ReactMount.js in the lib folder (15.0.1 used to have this file not sure when it stopped).
Update: React Hot Loader 3 is now in beta with a more comprehensive upgrade guide: https://github.com/gaearon/react-hot-loader/tree/v3.0.0-beta.7/docs#migration-to-30
None of the above solutions worked for me.
Spent the rest of the day in a rabbit hole of github issues/comments, weighing the pros/cons/feasibility of various hacky workarounds.
The quickest, simplest, "I just want to work on the original problem I intended to work on today" fix that worked for me comes from: https://github.com/gaearon/react-hot-loader/issues/417#issuecomment-261548082
In your webpack config, add the following alias to the resolve section:
resolve: {
alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' }
}
This is not a stable long term fix, this is a development only fix so you can continue developing without being forced to deal with upgrade issues out of the blue.
I'm still not 100% sure why I'm seeing this problem in my one app and not another, both were generated from fountain.js react-redux generator and have identical package.json.
You are using an outdated react-hot-loader package that uses the internal react api throught react\lib\ReactMount. Now react doesn't allow this hence the problem.
Try updating it to the latest version:
$ npm install --save-dev react-hot-loader#latest
Thank you for all your answers. I have solved my problems.
" This issue is related to the react-hot-loader package. You are using an old version that relies on the ReactMount.js file being present in the node_modules/react/lib folder." said by cheesemacfly.
So here is the solution for me:
1) updating the react-hot-loader to the latest version
npm install --save-dev react-hot-loader#latest
but here is another problem linked with react-hot-loader
2) so I removed the react-hot-loader from 'cfg/dev.js'
change the code
loader: 'react-hot!babel-loader'
into
loader: 'babel-loader'
Many thanks to cheesemacfly, I was able to solve the same issue with your suggestion to remove 'react-hot' from the loader.
{
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel'],
exclude: /(node_modules|lib\/ckeditor)/
}
I Changed to:
{
test: /\.(js|jsx)$/,
loader: 'babel',
exclude: /(node_modules|lib\/ckeditor)/
}
Remember to change the word 'loaders' to 'loader' since you are no longer referencing a list.
This is probably just a dependency issue. It's either not getting the correct version of react or not installing it correctly.
# update npm
$ npm install -g npm
# reinstall the generator-react-webpack package (note the global tags)
$ npm install -g yo
$ npm install -g generator-react-webpack
Then attempt to generate your app.
I had the same problem and none of the solution worked. It then occurred to me that it seems that react is missing. I got the problem after I installed and uninstalled a package for postgreSQL.
So I added it. PS, I was using yarn
yarn add react
Updating react-hot-loader didn't work for me, but removing the react-hot form the loaders list, by simply commenting it, fixed the issue:
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [
// 'react-hot',
'babel'
]
}
There are two issues at play:
Properly upgrading all your dependencies, and,
Use webpack v. 3.11.0, DO NOT upgrade to webpack v. 4.00,
Downgrade ReactJS to React v. 15.6.2.
Open package.json, which will have a list of things like...
"dependencies": {
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10",
"webpack": "^3.6.0"
(etc.)
Then run a command like this in your package base directory, which has the same dependencies as listed above...
sudo npm install --save react#15.6.2 react-dom#15.6.2 react-scripts#latest webpack#3.11.0 jquery#latest jquery-ui#latest
TLDR ANSWER : ^^^ This is the one command you'll actually need to run.
Notice the webpack-specific version.
After this, everything worked for me! I I checked the ReactJS version , using this answer , https://stackoverflow.com/a/36994601/2430549 , and my package.json now looks like...
"dependencies": {
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-hot-loader": "^4.2.0",
"react-scripts": "^1.1.4",
Source: Answer by JanTheHun, https://github.com/angular/angular-cli/issues/9793
For me it was an old version of react-dom.
I changed versions of react and react-dom to 16.X (to be exact : "react": "16.13.1", "react-dom": "16.13.1",), and then this problem went away for me.
I need help trying to run a cucumber feature file from within WebStorm. I want to do this as WebStorm allows me to run scenarios, instead of running whole features.
I am running an Angular client, and want to carry out end-to-end testing so I am using Protractor and Cucumber.
There are various errors I am getting depending on what I try, but the main ones are:
Error running test.feature
Cannot run program “usr/local/bin/cucumber.js” (in directory “My project's test directory”): error=2, No such file or directory
This is the error I get when trying to run a feature/scenario in WebStorm.
ReferenceError: browser is not defined
This is after I edit “Run Configurations” and pass in the path to the cucumber.js executable from ~/.nvm/versions/node/v5.10.1/bin/cucumber.js
and I have also tried passing in the cucumber.js exe that's located in the project, but I get the same error.
On the flip side, when I cd into my project root, and use protractor on the command line, after passing it my config.js file, it runs the feature file without a problem!
So as you can see, it seems to work on the command line using protractor, but with the number of feature files and scenarios I expect to have, it would be great to run scenarios individually.
For your information:
I can't remember how I installed NPM and Node, but the set up is as follows:
NPM: version 3.8.3. The directory for NPM is ~/.nvm/versions/node/v5.10.1/bin/npm
Node: version v5.10.1 ~/.nvm/versions/node/v5.10.1/bin/node
NodeJS: v0.10.25 /usr/bin/nodejs
Cucumber – I installed this globally, but also local to the project.
Protractor Cucumber-framework – installed as a dev dependency: see package.json file for project.
Protractor – installed globally.
The structure of my project is as follows:
Project
. http
. node_modules
.. cucumber
... bin
.... cucumber.js
. src
. test
.. step_definitions
... test_steps.js
..test.feature
. conf.js (for cucumber)
. karma.conf.js
. package.json
. webpack.config.js
contents of conf.js file:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
framework: 'custom',
specs: [
'test/features/test.feature'
],
capabilities: {
'browserName' : 'chrome'
},
baseUrl: 'http://localhost:9000',
cucumberOpts : {
require: 'test/features/step_definitions/test_steps.js',
format: 'pretty'
},
frameworkPath: require.resolve('protractor-cucumber-framework')
};
project's package.json file contents:
{
"name": "test_draft",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack -p --display-modules",
"dev": "webpack-dev-server --content-base http/ --hot --inline",
"test": "karma start"
},
"keywords": [],
"author": "",
"license": "UNLICENSED",
"dependencies": {
"angular": "^1.5.3",
"angular-ui-router": "^0.2.18",
"bootstrap": "^3.3.6",
"jquery": "^2.2.3",
"pikaday": "^1.4.0"
},
"devDependencies": {
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"chai": "^3.5.0",
"css-loader": "^0.23.1",
"cucumber": "^0.10.2",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"karma": "^0.13.22",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^0.2.3",
"karma-mocha": "^0.2.2",
"karma-webpack": "^1.7.0",
"mocha": "^2.4.5",
"protractor-cucumber-framework": "^0.5.0",
"style-loader": "^0.13.1",
"webpack": "^1.12.15",
"webpack-dev-server": "^1.14.1"
}
}
I just want to be able to right click a scenario, and run it.
There are various discussions related to Cucumber and WebStorm, however none of these have helped.
Your help would be much appreciated. Thanks in advance.
Check this Set Run Configuration for Cucumber in Webstorm and for the directory structure https://www.relishapp.com/cucumber/cucumber-js/docs/command-line-interface