(Unit testing) using Karma test runner

Asp2017.csproj

@@ -54,7 +54,7 @@
   </Target>
   <Target Name="CleanDist" AfterTargets="Clean">
     <ItemGroup>
-      <FilesToDelete Include="Client\dist\**; wwwroot\dist\**" />
+      <FilesToDelete Include="ClientApp\dist\**; wwwroot\dist\**" />
     </ItemGroup>
     <Delete Files="@(FilesToDelete)" />
     <RemoveDir Directories="Client\dist; wwwroot\dist" />

ClientApp/test/boot-tests.js

@@ -0,0 +1,30 @@
+Error.stackTraceLimit = Infinity;
+// Load required polyfills and testing libraries
+require('reflect-metadata');
+require('zone.js');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy.js');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
+const testing = require('@angular/core/testing');
+const testingBrowser = require('@angular/platform-browser-dynamic/testing');
+
+// Prevent Karma from running prematurely
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment
+testing.getTestBed().initTestEnvironment(
+    testingBrowser.BrowserDynamicTestingModule,
+    testingBrowser.platformBrowserDynamicTesting()
+);
+
+// Then we find all the tests
+const context = require.context('../', true, /\.spec\.ts$/);
+
+// And load the modules
+context.keys().map(context);
+
+// Finally, start Karma to run the tests
+__karma__.start();

ClientApp/test/karma.conf.js

@@ -0,0 +1,46 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '.',
+    frameworks: ['jasmine'],
+    exclude: [],
+    files: [
+      './boot-tests.js'
+    ],
+    preprocessors: {
+      './boot-tests.js': ['coverage', 'webpack', 'sourcemap']
+    },
+    client: {
+      captureConsole: false
+    },
+    coverageReporter: {
+      type: 'in-memory'
+    },
+    remapCoverageReporter: {
+      'text-summary': null,
+      json: './coverage/coverage.json',
+      html: './coverage/html'
+    },
+    reporters: ['mocha', 'coverage', 'remap-coverage'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_WARN,
+    autoWatch: false,
+    browsers: ['Chrome'],
+    mime: {
+      'application/javascript': ['ts', 'tsx']
+    },
+    singleRun: true,
+    webpack: require('./webpack.config.test.js')({
+      env: 'test'
+    }),
+    webpackMiddleware: {
+      noInfo: true,
+      stats: {
+        chunks: false
+      }
+    }
+  });
+};

ClientApp/test/webpack.config.test.js

@@ -0,0 +1,112 @@
+const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
+
+var path = require('path');
+var rootPath = path.join.bind(path, path.resolve(__dirname, '../../'));
+
+module.exports = function (options) {
+  return {
+    devtool: 'inline-source-map',
+    resolve: {
+      extensions: ['.ts', '.js'],
+      modules: [rootPath('ClientApp'), 'node_modules']
+    },
+    module: {
+      rules: [{
+          enforce: 'pre',
+          test: /\.js$/,
+          loader: 'source-map-loader',
+          exclude: [
+            rootPath('node_modules/rxjs'),
+            rootPath('node_modules/@angular')
+          ]
+        },
+        {
+          test: /\.ts$/,
+          use: [{
+              loader: 'awesome-typescript-loader',
+              query: {
+                sourceMap: false,
+                inlineSourceMap: true,
+                compilerOptions: {
+                  removeComments: true
+                }
+              },
+            },
+            'angular2-template-loader'
+          ],
+          exclude: [/\.e2e\.ts$/]
+        },
+        {
+          test: /\.css$/,
+          loader: ['to-string-loader', 'css-loader']
+        },
+        {
+          test: /\.scss$/,
+          loader: ['raw-loader', 'sass-loader']
+        },
+        {
+          test: /\.html$/,
+          loader: 'raw-loader'
+        },
+        {
+          enforce: 'post',
+          test: /\.(js|ts)$/,
+          loader: 'istanbul-instrumenter-loader',
+          options: {
+            esModules: true
+          },
+          include: rootPath('ClientApp'),
+          exclude: [
+            /ClientApp\\test/,
+            /\.(e2e|spec)\.ts$/,
+            /node_modules/
+          ]
+        }
+
+      ]
+    },
+    plugins: [
+      new ContextReplacementPlugin(
+        /**
+         * The (\\|\/) piece accounts for path separators in *nix and Windows
+         */
+        /angular(\\|\/)core(\\|\/)@angular/,
+        rootPath('ClientApp'), // location of your src
+        {
+          /**
+           * your Angular Async Route paths relative to this root directory
+           */
+        }
+      ),
+      new LoaderOptionsPlugin({
+        debug: false,
+        options: {
+          /**
+           * legacy options go here
+           */
+        }
+      }),
+
+    ],
+    performance: {
+      hints: false
+    },
+
+    /**
+     * Include polyfills or mocks for various node stuff
+     * Description: Node configuration
+     *
+     * See: https://webpack.github.io/docs/configuration.html#node
+     */
+    node: {
+      global: true,
+      process: false,
+      crypto: 'empty',
+      module: false,
+      clearImmediate: false,
+      setImmediate: false
+    }
+
+  };
+}

package.json

@@ -2,28 +2,15 @@
   "name": "angular4-aspnetcore-universal",
   "version": "1.0.0-rc3",
   "scripts": {
-    "test": "jest",
-    "test:watch": "npm run test -- --watch",
+    "test": "karma start ClientApp/test/karma.conf.js",
+    "test:watch": "npm run test -- --auto-watch --no-single-run",
     "test:ci": "npm run test -- --runInBand",
     "test:coverage": "npm run test -- --coverage",
     "build:dev": "npm run build:vendor && npm run build:webpack",
     "build:webpack": "webpack --progress --color",
     "build:prod": "npm run build:vendor -- --env.prod && npm run build:webpack -- --env.prod",
     "build:vendor": "webpack --config webpack.config.vendor.js --progress --color"
   },
-  "jest": {
-    "preset": "jest-preset-angular",
-    "setupTestFrameworkScriptFile": "./ClientApp/test/setupJest.ts",
-    "globals": {
-      "__TS_CONFIG__": "ClientApp/tsconfig.spec.json",
-      "__TRANSFORM_HTML__": true
-    },
-    "coveragePathIgnorePatterns": [
-      "/node_modules/",
-      "<rootDir>/ClientApp/test/.*.ts"
-    ],
-    "coverageDirectory": "coverage"
-  },
   "dependencies": {
     "@angular/animations": "^4.3.0",
     "@angular/common": "^4.3.0",
@@ -81,12 +68,19 @@
     "@ngtools/webpack": "^1.3.0",
     "@types/chai": "^3.4.34",
     "@types/jasmine": "^2.5.37",
-    "@types/jest": "^19.2.3",
     "chai": "^3.5.0",
     "codelyzer": "^3.0.0",
+    "istanbul-instrumenter-loader": "^3.0.0",
     "jasmine-core": "^2.5.2",
-    "jest": "^20.0.0",
-    "jest-preset-angular": "^2.0.1",
+    "karma": "^1.7.1",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "^1.1.0",
+    "karma-mocha-reporter": "^2.2.4",
+    "karma-remap-coverage": "^0.1.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^2.0.3",
     "tslint": "^5.0.0"
   }
 }