I've been exploring unit testing in an Angular2 application and following the guidance provided by the Angular documentation. However, I've encountered a perplexing error that has stumped me.
To experiment with testing, I've set up a simple demo app mirroring the configuration of my larger project. This Angular2 app is integrated with ASP.NET Core MVC using templates and setup from this link: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack. The tech stack includes Webpack, Typescript, Karma, and Jasmine for handling unit tests.
The issue arises when I attempt to write tests for a component featuring an external template as described in this documentation. Although all my tests pass smoothly, an error occurs in my editor and during the application's execution. The specific error message reads:
error TS2345: Argument of type '(done: any) => any' is not assignable to parameter of type '() => void'.While resolving the error remains my top priority, I'd also appreciate setting up the environment so that my .spec.ts files are excluded from the bundles created by Webpack for the production site (noting that these spec.ts files reside alongside the .ts files implementing the components).
Here is an example of one of the test files, banner.component.spec.ts:
karma.conf.js:
'use strict';
module.exports = (config) => {
config.set({
autoWatch: true,
browsers: ['Chrome', 'PhantomJS'],
files: [
'./node_modules/es6-shim/es6-shim.min.js',
'./karma.entry.js'
],
frameworks: ['jasmine'],
logLevel: config.LOG_INFO,
phantomJsLauncher: {
exitOnResourceError: true
},
preprocessors: {
'karma.entry.js': ['webpack', 'sourcemap']
},
reporters: ['progress', 'growl'],
singleRun: false,
webpack: require('./webpack.config.test'),
webpackMiddleware: {
noInfo: true
}
});
};
karma.entry.js
require('es6-shim');
require('reflect-metadata');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
...
webpack.config.test.js
'use strict';
const path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: 'inline-source-map',
module: {
loaders: [
{ loader: 'raw', test: /\.(css|html)$/ },
...
]
},
resolve: {
extensions: ['', '.js', '.ts'],
modulesDirectories: ['node_modules'],
root: path.resolve('.', 'ClientApp/app')
}
};
webpack.config.js
/// <binding ProjectOpened='Watch - Development' />
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
...