On using WebStorm 10 for Node.js dev, I am unable to step through the test cases (written in ES6) while debugging. I guess the transcompilation is making the test file go out of sync. Wondering if anyone has been able to debug successfully?
Here is my test.js file
describe('TestFlow', function () {
"use strict";
it('Test Path', (done) => {
console.log("Testing_1 happy path\n");
console.log("Testing_2 happy path\n");
done();
});
});
And I have the Mocha options configured to use --compilers js:babel/register. Now when I try to debug the code, the step through process is unpredictable and it just doesn't work. The babel compilation is messing with the debugging process.
Could you please let me know if there is a work around to this issue? I thought the debugging ES6 code was a feature in WebStrom 10, but I have not had luck with it
This works now in at least WebStorm 2017.1. JetBrains has marked this issue as fixed
From terminal:
> npm install --save-dev babel-core babel-preset-es2015
Under the menu Run/Edit Configurations...Mocha Run/Debug configuration, enter this option:
Extra Mocha options: --compilers js:babel-core/register
Also, have a .babelrc file (or put in package.json)
{
"presets": [
"es2015"
]
}
You should now be able to run and debug your ES6 unit tests
See this article as well
Webstorm debugger won't work with runtime babel compilation. You need to first compile your ES6 files using babel with sourcemaps and place them let's say in dist directory. You can use this gulp task to do so.
In webstorm's debug mocha configuration point working directory to the above created dist directory. Also point test directory to your tests in dist directory. Put a breakpoint in the original ES6 test file and start your debug session.
In WebStorm go to Run/Edit Configurations.../Templates/Mocha/Extra Mocha options and insert the following (depends on version of babel: https://git.io/vdcSr).
Babel 7
--require #babel/register
Babel 6
--require babel-core/register
Related
I'm using Stencil.js to create a web component library and I'm heavily relying on E2E tests. As they're rather slow it becomes more and more cumbersome to run the entire test suite (using the Stencil.js CLI) while developing new components.
However, I'm not able to run single tests in my IDE (IntelliJ IDEA) or via command line. It works perfectly fine for unit tests though.
My Jest config looks like this:
module.exports = {
"roots": [
"<rootDir>/src"
],
"preset": "#stencil/core/testing"
}
When I try to run tests in a single file (jest --config jest.config.js --testPathPattern src/components/button/button.e2e.ts$)
it fails, because
newE2EPage() is only available from E2E tests, and ran with the --e2e cmd line flag.
newE2EPage() comes with Stencil.js and I don't know what Stencil.js's CLI does in the background. Furthermore, I cloned the Stencil.js repository, just to see if it is working with their E2E tests (https://github.com/ionic-team/stencil/tree/master/test/end-to-end) but it doesn't work either.
Any idea how I can configure Jest so that it's able to run Stencil.js-E2E tests from the command line?
The --e2e flag is used for the npm script in the package.json. To start e2e tests, you can add this in your package.json:
"scripts": {
"test:e2e": "stencil test --e2e"
}
And run npm run test:e2e. For a specific file, you add it at the end like this:
npm run test:e2e src/components/button/button.e2e.ts
For more info, see the StencilJS doc: https://stenciljs.com/docs/end-to-end-testing
i have the same problem. IntelliJ and 'Run' single 'it' didnt work.
newE2EPage() is only available from E2E tests, and ran with the --e2e cmd line flag.
when i run 'npm run test' everything will work fine. the difference is that npm run stencil before and only jest dont work.
here is the stencil jest dir https://github.com/ionic-team/stencil/tree/master/src/testing/jest aswell a config.
i found in here https://stenciljs.com/docs/testing-overview a VS-CODE run jest code but no Intellij setup.
im on the run to get the path of the current file to run stencil via npm and the path the e2e file. but i cant find the correct variable for the run config.
i hope we got this solved soon.
cheers
I am not a VS Code user, but in contrast to IntelliJ there is a launch.json for VSC to run single tests: https://github.com/ionic-team/stencil-site/pull/480
I'm using visual studio code on Windows 10, with jasmine and nodemon
How does one set up their package.json such that you can run jasmine continuously, yet also be able to drop breakpoints in visual studio code to debug? I feel like I've been searching for ages on how to do some kind of setup like this.
Here is what I currently have in package.json. Running this allows me to write in my .spec files and jasmine gets continualy run on each change:
"scripts": {
"test": ".\\node_modules\\.bin\\nodemon --inspect --ext js --exec \".\\node_modules\\.bin\\jasmine\""
},
Anyone have a magical command to allow debugging any spec file, or any file which the tests execute against?
I would like to test code in a node project that uses async iteration without using babel.
Based on https://github.com/facebook/jest/issues/2485, I tried running jest using node --harmony_async_iteration ./node_modules/.bin/jest. However, I still see syntax errors in my module where async iteration syntax is used. The node command line option was ineffective, as if jest spawned a new process for the test runner, without using --harmony_async_iteration.
My async iteration source file is parsed without error when loaded by node (without jest) using --harmony_async_iteration.
Babel is an integral part of jest. It is not necessary to use babel to transpile your application for non-test use, but babel absolutely must be configured in order to allow async generators to work with jest.
Install the babel-plugin-transform-async-generator-functions:
npm install --save-dev babel-plugin-transform-async-generator-functions
or
yarn add --dev babel-plugin-transform-async-generator-functions
Activate the plugin by creating a .babelrc file (or add to the file):
{ "plugins": ["transform-async-generator-functions"] }
Now your jest tests should work with async generators.
In one of my NodeJS modules I need to access a file that is part of the module in an own folder (for unit tests). It tried __dirname in the calling file with a relative path to that resource file. This works when running from within vscode, but not whe executing npm test in a terminal. In that case the constructed path is one level off. How can that be?
I have to add that I'm using typescript for coding and Mocha for unit tests.
Simply logging __filename helps a bit here. It shows that under vscode the executing file is the transpiled JS file, while under Mocha it's the typescript source file. I run:
mocha --compilers ts:ts-node/register,tsx:ts-node/register
for my tests. Any idea how to overcome this and ensure the correct path is used (other than testing if __filename ends with .ts)?
Ok, turns out to be simple. Instead of running mocha with ts code let it use the transpiled code. Only requires a transpilation run before testing:
"scripts": {
"prepublish": "tsc",
"install": "tsc",
"test": "tsc && mocha out/test"
},
I'm running my node application with:
"./node_modules/nodemon/bin/nodemon.js --ignore ./build/* ./bin/www --exec babel-node --debug=7001",
When I connect with a WebStorm remote configuration it seems to work, but the placing breakpoint results in either them being ignored, or the code actually stop at different lines.
This is probably due to Babel transpiling. How can I do that, given my code is transpiled at runtime?
My .babelrc file:
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"]
}
Here is the revelent documentation : https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/
If you’d like to debug your code using WebStorm or Chrome, make sure
the tools you’re using generates source maps. For example, when
using Babel only, you need to add "sourceMaps": "both" option to
your .babelrc file or pass it as a command-line argument. If you’re
using Babel as a part of a more complex build process, you might need
a addition configuration for generating source maps, e.g. use
gulp-sourcemaps with Gulp or add devtool: "source-map" option when
using Webpack.
Source maps allow you to put breakpoints in the original source files in the IDE and be sure that they are hit then compiled code is
executed in the browser.