Karma not recognizing Angular2 modules and components with Rails Webpacker

Question

My team updated the Rails version of our application to 5.1 so we could use Webpacker, a wrapper to use Webpack with Rails and then use Angular 2 properly.

We started setting up the test suite for the Angular 2 modules using Karma + Jasmine + Webpack following this article.

If I write simple test cases, without Angular Component, TestBed and ComponentFixture, everything looks fine. However, if I try to import Angular modules and test some components, Karma raises the following error message for every component and module:

ERROR in ./app/javascript/app/app.module.ts
Module parse failed: /[application path omitted]/app/javascript/app/app.module.ts Unexpected character '@' (17:0)
You may need an appropriate loader to handle this file type.
| import { AppRoutingModule } from './app-routing.module';
| 
| @NgModule({
|   imports: [
|     BrowserModule,

The project structure is:

- app
-- ...
-- javascript (webpacker create this folder in the first time running)
---- app (where all modules are stored)
------ ...
------ app.routing.module.ts
------ app.component.ts
------ app.module.ts
------ echo.pipe.ts (a file created just to test the Karma suite)
---- packs
---- test
------ echo.pipe.spec.ts
------ main.js (entry point of tests)
------ main.spec.ts

The karma.conf.js file:

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      { pattern: './app/javascript/app/**/*.ts', watched: false, served: true },
      { pattern: './app/javascript/test/main.js', watched: false }
    ],
    plugins: [
      require('karma-webpack'),
      require('karma-jasmine'),
      require('karma-phantomjs-launcher'),
      require('karma-chrome-launcher'),
      require('karma-sourcemap-loader'),
      require('karma-babel-preprocessor'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter')
    ],
    exclude: [
    ],
    preprocessors: {
      'app/javascript/**/*.ts': ['webpack', 'sourcemap'],
      'app/javascript/test/main.js': ['webpack', 'sourcemap']
    },
    mime: { 'text/x-typescript': ['ts','tsx'] },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome'],
    singleRun: true,
    concurrency: Infinity
  })
}

The echo.pipe.ts file:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'echo'
})
export class EchoPipe implements PipeTransform {
  transform(value: any): any {
    return value;
  }
}

The main.js file:

describe('Meaningful Test', () => {
    it('1 + 1 => 2', () => {
        expect(1 + 1).toBe(2);
    });
});

require('./main.spec.ts');

The main.spec.ts file:

import 'core-js/es6';
import 'core-js/es7/reflect';

import 'zone.js/dist/zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/jasmine-patch';

import 'rxjs/Rx';

import { TestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';

TestBed.initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

describe('Meaningful Test 2', () => {
    it('1 + 1 => 2', () => {
        expect(1 + 1).toBe(2);
    });
});

The echo.pipe.spec.ts file:

import { Component }                        from '@angular/core';
import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { By }                               from '@angular/platform-browser';
import { DebugElement }                     from '@angular/core';

import { EchoPipe } from '../app/echo.pipe';

describe('EchoPipe', () => {

  let comp:    EchoPipe;
  let fixture: ComponentFixture<EchoPipe>;
  let de:      DebugElement;
  let el:      HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ EchoPipe ],
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(EchoPipe);

    comp = fixture.componentInstance; 

    comp.name = 'foo';
  });

  it('works well', () => {
    fixture.detectChanges();

    el = fixture.debugElement.nativeElement as HTMLElement; 

    expect(el.querySelector('p').textContent).toBe('foo');
  });
});

const context = require.context('./', true, /\.spec\.ts$/);
context.keys().map(context);

Karma not recognizing Angular2 modules and components with Rails Webpacker

0 Answers0