WebStorm Mocha Tests with Node Interpreter for react-create-app
Normally I don't use create-react-app but the team I am working with does. react-create-app is a bunch of magic config code done by FB that tries to allow React devs to start get up and running with zero configuration. It tells you not to install babel as it's already "backed in".
When you run npm install it does add most the babel middleware, presets for ES6, etc. But what I don't see it add is babel-cli. I want to run my mocha tests via
node_modules/babel-cli/bin/babel-node
And trying not to install babel-cli if I can help it as the team is trying to keep this out of the box working as is. Is there any way to tell WebStorm about babel + node as the interpreter if babel-cli is not installed? Probably not right?
In my personal projects at home again I don't use create-react-app. So I can do this for node-interpreter:
But in the react-create-app project, is there any way to tell Webstorm about babel if you don't have the cli installed?
Please sign in to leave a comment.
you don't need babel-node here, specifying `--compilers js:babel-core/register` option is enough to get ES6 code transpiled by babel on-the-fly. And babel-core/register is included in application created with react-create-app
the following configuration works fine for me
>is there any way to tell Webstorm about babel if you don't have the cli installed
Sorry, but honestly I don't understand what you meant to say. You can't use babel-node to run your code if you don't have it installed. And WebStorm can do nothing to help you here:)
I've already tried that and it does not work. I know what you mean but putting just that mocha option does not work unless you add a .babelrc if you want to use the --compilers js:babel-core/register option with a preset for ES6.
And no you can't use babel-node. I even tried installing babel-cli. create-react-app does not install babel-cli which contains babel-node. And if you try to install it manually and try to use it, it doesn't work, create-react-app does something under the hood and FB told me not to do that. I am running this in OS X, not that it matters.
Again I'm using https://github.com/facebookincubator/create-react-app.
What I ended up having to do was a hack and add my .babelrc and then instead of using the babel-preset-es2015 preset I had to use
I did a blog post on it here https://www.codementor.io/daveschinkel13/running-mocha-enzyme-with-creat-react-app-84flnngkk
>I know what you mean but putting just that mocha option does not work unless you add a .babelrc if you want to use the --compilers js:babel-core/register option with a preset for ES6.
It works for me - I'm using a project generated by create-react-app, and I do not have .babelrc in it
>And no you can't use babel-node
Did I wrote anywhere that you can?
I read your thread on github (https://github.com/facebookincubator/create-react-app/issues/2167), I don't think that moving this discussion here makes any sense. And I can't see what we can do on our end to help you
What does your package.json look like because it's not working for me without .babelrc
{"name": "untitled3",
"version": "0.1.0",
"private": true,
"devDependencies": {
"autoprefixer": "6.5.1",
"babel-core": "6.17.0",
"babel-eslint": "7.1.1",
"babel-jest": "17.0.2",
"babel-loader": "6.2.7",
"babel-preset-react-app": "^2.0.1",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.26.0",
"detect-port": "1.0.1",
"dotenv": "2.0.0",
"eslint": "3.8.1",
"eslint-config-react-app": "^0.5.0",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"filesize": "3.3.0",
"flow": "^0.2.3",
"flow-bin": "^0.44.0",
"fs-extra": "0.30.0",
"gzip-size": "3.0.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.2",
"jest": "17.0.2",
"json-loader": "0.5.4",
"mocha": "^3.4.1",
"object-assign": "4.1.0",
"path-exists": "2.1.0",
"postcss-loader": "1.0.0",
"promise": "7.1.1",
"react-dev-utils": "^0.4.2",
"recursive-readdir": "2.1.0",
"strip-ansi": "3.0.1",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.14.0",
"webpack-dev-server": "1.16.2",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "1.0.0"
},
"dependencies": {
"accounting": "^0.4.1",
"classnames": "^2.2.5",
"lodash": "^4.17.4",
"prop-types": "^15.5.9",
"react": "^15.4.2",
"react-addons-shallow-compare": "^15.4.2",
"react-dom": "^15.4.2",
"react-onsenui": "^1.2.0",
"react-relay": "^0.10.0",
"react-router-redux": "^4.0.8",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>\\config\\polyfills.js"
],
"testPathIgnorePatterns": [
"<rootDir>[/\\\\](build|docs|node_modules)[/\\\\]"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>\\config\\jest\\cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>\\config\\jest\\fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
}
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
as you can see, it includes
so .babelrc is not required
which is exactly why I asked what's in your package.json, I knew there was something missing in our conversation that wasn't mentioned :). If you aren't using a .babelrc file I wanted to know how it was finding that preset on your side :)
can't see your point, sorry. This is a default configuration generated by react-create-app, and --compilers js:babel-core/register option works with it. Let's stop here, seems there is nothing I can help you with
> YES, you have to create a .babelrc file or put the create-react-app preset in package.json, that's what we found. And I've shared with you the solution (my blog post), we're done. Not sure why you are confused.
There's more than this though my blog post details it. You can't just start adding things on top of a create-react-app that's not ejected and think it's ok. That's why Dan from FB and I discussed it.