How can I solve the problem with debuggable unit tests in WebStorm?
WebStorm 2017.2
I am a newbie to WebStorm and Web-developing. I try to create a simple TypeScript project and save it as the template. This project aimed to provide to me such capabilities:
- Build my code sources to single js-module.
- Allow to me to debug (with breakpoints) my code sources with mapping to my TypeScript files.
- Write unit tests for my TypeScript files and debug they with the breakpoints.
- Generate the documentation for my TypeScript code sources.
My code sources of this simple *hello-world* project is here.
I added to my project the Node configuration. It allows to me debug my code sources. Also, I can build the single output js-module by `webpack` from WebStorm console. For documentation generation I use TypeDoc.
But I need to add the capability of unit testing and debugging of my unit tests with the source mapping...
Earlier I wrote the tests on Jasmine and launch them through WebStorm console (in my other project). But I did not manage to use the breakpoints in the tests. In WebStorm I see the configurations for `Karma` and `Mocha`. On Karma site, I see info about Karma uses Jasmine. Therefore in my new project, I try to use `Karma` + `Jasmine`.
I have some problems with `karma.config.ts` file... TypeScript requires to set the types for the `config` and `path` parameters, but if I set `any` type for them then my test cannot be launched. Otherwise, TypeScript can't compile the source.
Also I see test runner output:
> Uncaught ReferenceError: define is not defined
You can download and look my simple project template. How can I solve the problem with debuggable unit tests in WebStorm?
Thank you!
Please sign in to leave a comment.
>How can I solve the problem with debuggable unit tests in WebStorm?
Sorry, but can you explain what your issue has to do with WebStorm? If you have problems setting up karma + webpack, you'd better post a question to stackoverflow.com...
karma-typescript-preprocessor (https://github.com/sergeyt/karma-typescript-preprocessor) just transpiles the files using provided options, you have to care yourself about modules loading... In your case, you are transpiling to amd format, but it requires adding requirejs to dependencies and setting up your code to work with this module system. Or, you can use this preprocessor with some bundler like webpack or browserify
But, IMO, the better solution would be using a different preprocessor. I'd suggest https://github.com/monounity/karma-typescript. Just run
and then change your karma.config.ts as follows:
module.exports = (config : any) =>{
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', "karma-typescript"],
// list of files / patterns to load in the browser
files: [
{pattern: "src/**/*.ts"}, {pattern: "test/**/*.ts"}
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'**/*.ts': ["karma-typescript"]
},
reporters: ['progress', 'karma-typescript'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
it just works...
Thank you very much! Now it works fine!
I updated the github repository of this project. Also, I installed karma-html-reporter. I expected to get the html report of unit testing, but I see nothing:
How can I fix it?
WebStorm uses its own reporter to represent test results as a tree view with filters/navigation etc. If you need a text output karma produces, run karma using Node.js run configuration
Thank you.