Problem running test: Cannot read property 'afterCompile'

[PabloCabaleiro]

Hi,
I'm a newbie working with unit test on Ionic and I'm having a rough time with this issue. I'm able to run the test without problem if I'm not using any spec files (I used #79 to get there), but I get the next error trying to test a page.

> karma start ./test-config/karma.conf.js

webpack: Compiled successfully.
webpack: Compiling...
01 03 2018 11:40:21.848:WARN [karma]: No captured browser, open http://localhost:9876/

webpack: Compiled with warnings.
01 03 2018 11:40:21.858:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
01 03 2018 11:40:21.858:INFO [launcher]: Launching browser Chrome with unlimited concurrency
01 03 2018 11:40:21.915:INFO [launcher]: Starting browser Chrome
01 03 2018 11:40:30.401:INFO [Chrome 62.0.3202 (Linux 0.0.0)]: Connected on socket Vo5QLQDs_T0I_Q9pAAAA with id 48205151

START:
01 03 2018 11:40:31.055:WARN [reporter]: SourceMap position not found for trace: undefined
01 03 2018 11:40:31.056:WARN [reporter]: SourceMap position not found for trace: undefined
01 03 2018 11:40:31.057:WARN [reporter]: SourceMap position not found for trace: undefined
01 03 2018 11:40:31.057:WARN [reporter]: SourceMap position not found for trace: undefined
01 03 2018 11:40:31.057:WARN [reporter]: SourceMap position not found for trace: undefined
01 03 2018 11:40:31.058:WARN [reporter]: SourceMap position not found for trace: undefined
Chrome 62.0.3202 (Linux 0.0.0) ERROR
  {
    "message": 
"Uncaught Error: Module build failed: TypeError: Cannot read property 'afterCompile' 
of undefined\n    at successfulTypeScriptInstance (/path/node_modules/ts-loader/dist/instances.js:147:27)\n    
at Object.getTypeScriptInstance (/path/node_modules/ts-loader/dist/instances.js:48:12)\n    
at Object.loader (/path/node_modules/ts-loader/dist/index.js:16:41)\nat karma-test-shim.js:80874:1\n\n
Error: Module build failed: TypeError: Cannot read property 'afterCompile' of undefined\n    
at successfulTypeScriptInstance (/path/node_modules/ts-loader/dist/instances.js:147:27)\n    
at Object.getTypeScriptInstance (/path/node_modules/ts-loader/dist/instances.js:48:12)\n    
at Object.loader (/path/node_modules/ts-loader/dist/index.js:16:41)\n    
at Object.<anonymous> (karma-test-shim.js:80874:7)\n    at __webpack_require__ (webpack:///webpack/bootstrap%2034e18eb4bd6904d0fe6e:19:0 <- karma-test-shim.js:20:30)\n    
at webpackContext (webpack:///src%20/.spec/.ts:5:0 <- karma-test-shim.js:80855:9)\n    at Array.forEach (<anonymous>)\n    at Object.<anonymous> (webpack:///test-config/karma-test-shim.js:16:0 <- karma-test-shim.js:73175:19)\n    
at __webpack_require__ (webpack:///webpack/bootstrap%2034e18eb4bd6904d0fe6e:19:0 <- karma-test-shim.js:20:30)\n    at webpack:///webpack/bootstrap%2034e18eb4bd6904d0fe6e:62:0 <- karma-test-shim.js:63:18\n    at karma-test-shim.js:66:10",
    "str": "Uncaught Error: Module build failed: TypeError: Cannot read property 'afterCompile' 
of undefined\n    at successfulTypeScriptInstance (/path/node_modules/ts-loader/dist/instances.js:147:27)\n    
at Object.getTypeScriptInstance (/path/node_modules/ts-loader/dist/instances.js:48:12)\n    
at Object.loader (/path/node_modules/ts-loader/dist/index.js:16:41)\nat karma-test-shim.js:80874:1\n\n
Error: Module build failed: TypeError: Cannot read property 'afterCompile' of undefined\n    
at successfulTypeScriptInstance (/path/node_modules/ts-loader/dist/instances.js:147:27)\n    
at Object.getTypeScriptInstance (/path/node_modules/ts-loader/dist/instances.js:48:12)\n    
at Object.loader (/path/node_modules/ts-loader/dist/index.js:16:41)\n    
at Object.<anonymous> (karma-test-shim.js:80874:7)\n    at __webpack_require__ (webpack:///webpack/bootstrap%2034e18eb4bd6904d0fe6e:19:0 <- karma-test-shim.js:20:30)\n    
at webpackContext (webpack:///src%20/.spec/.ts:5:0 <- karma-test-shim.js:80855:9)\n    at Array.forEach (<anonymous>)\n    at Object.<anonymous> (webpack:///test-config/karma-test-shim.js:16:0 <- karma-test-shim.js:73175:19)\n    
at __webpack_require__ (webpack:///webpack/bootstrap%2034e18eb4bd6904d0fe6e:19:0 <- karma-test-shim.js:20:30)\n    at webpack:///webpack/bootstrap%2034e18eb4bd6904d0fe6e:62:0 <- karma-test-shim.js:63:18\n    at karma-test-shim.js:66:10"
  }

Finished in 0.662 secs / 0 secs @ 11:40:31 GMT+0100 (CET)

SUMMARY:
✔ 0 tests completed

webpack.test.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
  devtool: 'inline-source-map',

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'ts-loader'
          } , 'angular2-template-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader?attrs=false'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'null-loader'
      }
    ]
  },

  plugins: [
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)@angular/,
      root('./src'),
      {}
    ),
    new webpack.ContextReplacementPlugin(
      /ionic-angular/,
      root('./src'),
      {}
    ),
  ]
};

function root(localPath) {
  return path.resolve(__dirname, localPath);
}

karma.conf.js

var webpackConfig = require('./webpack.test.js');

module.exports = function(config) {
  var _config = {
    basePath: '',

    frameworks: ['jasmine'],

    files: [
      { pattern: './karma-test-shim.js', watched: true }
    ],

    preprocessors: {
      './karma-test-shim.js': ['webpack', 'sourcemap']
    },

    webpack: webpackConfig,

    webpackMiddleware: {
      stats: 'errors-only'
    },

    webpackServer: {
      noInfo: true
    },

    browserConsoleLogOptions: {
      level: 'log',
      format: '%b %T: %m',
      terminal: true
    },

    reporters: ['mocha', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  };

  config.set(_config);
};'

karma-test-shim.js

Error.stackTraceLimit = Infinity;

require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
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');

var appContext = require.context('../src', true, /\.spec\.ts/);

appContext.keys().forEach(appContext);

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(
  browser.BrowserDynamicTestingModule,
  browser.platformBrowserDynamicTesting()
);

spec file

describe("Dashboard", () => {

    it("Sum", () => expect(2+2).toBe(5));

})

package.json

"devDependencies": {
    "@angular/tsc-wrapped": "^4.4.6",
    "@ionic/app-scripts": "3.0.1",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "^2.0.3",
    "angular2-template-loader": "^0.6.2",
    "html-loader": "^0.5.5",
    "jasmine": "^2.99.0",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-mocha-reporter": "^2.2.5",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.13",
    "null-loader": "^0.1.1",
    "ts-loader": "^4.0.0",
    "ts-node": "^5.0.0",
    "typescript": "^2.4.2"
  },

Any hint on what's happening?
Thanks for the help!

[leifwells]

What is the name of your spec file? If it doesn't end in .spec.ts and you only have one file, then you might see this issue. So, dashboard-component.spec.ts is a file name I would expect to work.

Hope that helps.

[PabloCabaleiro]

Thanks for the answer! The name of the file is dashboard.spec.ts so I think it is correct. Also, if I remove this file I have no errors on the console.

@PavloWasTaken : did you find answer for this ? , getting same error. if I remove then no errors.

[PabloCabaleiro]

Hi, @NagarajRaju

I have not found a way to make it work so, finally, I have used another project as a guide for unit test.

[marymar]

For me it helped to change to lower ts-loader version 3.5, which works actually with my webpack version. rails/webpacker#1307

[davidmpaz]

I am affected also with this. I can confirm that the error is caused by a difference in webpack version used. Still in my case after fixing the ts-loader version to 3.5.0 my unit tests keeps compiling forever.

yarn run test
yarn run v1.5.1
$ karma start ./test-config/karma.conf.js
ℹ ｢wdm｣: 
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling... // here is always stuck for very long time

I feel like I am entering now in a dependencies hell if I start testing which combination of packages works fine.

ionic info

cli packages: (/srv/http/is7/mobile-sdk/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3 browser 5.0.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 26.1.1
    Node              : v8.9.4
    npm               : 5.6.0 
    OS                : Linux 4.13

Any idea on how to proceed?

UPDATE:
I can confirm that the error is caused by a difference in webpack version used. Other related problems that I had was related to the particular project I am working on so it s not relevant to this thread.