Karma Error - Module Parse failed, Unexpected Character '

Question

Can anybody tell me why I am getting this error:

 Uncaught Error: Module parse failed: app\src\app\css\fonts\roboto-300-latin.woff2 
 Unexpected character ' ' (1:4)
 You may need an appropriate loader to handle this file type.
 (Source code omitted for this binary file)
 at unit_tests/index.js:138633


npm ERR! Test failed.  See above for more details.

My karma config:

// 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'],
     plugins: [
        require('karma-jasmine'),
        require("karma-webpack"),
        require('karma-chrome-launcher'),
        require('karma-sourcemap-loader'),
        require('karma-jasmine-html-reporter'),
        require('karma-coverage-istanbul-reporter'),
        require('@angular/cli/plugins/karma'),
         'karma-*'
       ],
      client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
      },
     files: [
       'unit_tests/index.js'
     ],
     preprocessors: {
       'unit_tests/index.js': ['webpack', 'sourcemap']
     },
     webpack: {
        resolve: {
          extensions: ['.ts', '.js', '.jsx'],
          alias: {
             components: 'components',
             services: 'services'
          }
         }, 
       module: {
       rules: [{
        test: /\.ts$/,
        loaders: [
          'awesome-typescript-loader',
          'angular2-template-loader'
        ]
      },
      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader'
         ],
        // exclude: [helpers.root('src/index.html')]
      },
      {
        test: /\.html$/,
        loader: 'raw-loader'
      }
    ]
  },
   devtool: 'inline-source-map'
  },
   reporters: ['progress'],
   port: 9876,
   colors: true,
   logLevel: config.LOG_INFO,
   autoWatch: true,
   browsers: ['Chrome'],
   singleRun: true,
   concurrency: Infinity
  });
};

My spec file:

import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { RouterModule, Router } from '@angular/router';
import { MaterialModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AuthHttp, AuthConfig, AUTH_PROVIDERS, provideAuth, tokenNotExpired 
} from 'angular2-jwt';
import { AppModule } from '../../../src/app/app.module';
import { } from 'jasmine';

import { FirmService } from '../../../src/app/containers/dashboard/services/firm.service';
import { FirmListComponent } from '../../../src/app/containers/dashboard/firm-list/firm-list.component';

describe('Firm List Component', () => {
let component;
let fixture;
let de: DebugElement;
let el: HTMLElement;
let de2: DebugElement;
let el2: HTMLElement;

let mockRouter: any;
    class MockRouter {
       public navigate = jasmine.createSpy('navigate');
   }

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [MaterialModule, FormsModule, AppModule],
        declarations: [FirmListComponent],
        providers: [FirmService]
    })
        .compileComponents()
        .then(() => {
            fixture = TestBed.createComponent(FirmListComponent);
            component = fixture.componentInstance;
        });
}));

it('should have a defined component', () => {
    expect(component).toBeDefined();
  });
});

I'm getting this error when I try to import my AppModule. I want to import that instead of having to import a bunch of different services and configs separately.Thanks for the help

Answer 1

You have error because there is no loader or transformer which can transform your fonts file. for that first you have to install file-loader

npm install --save-dev file-loader

then Add this object to rules array. its telling webpack that when you find these type of font files transform them with file-loader

{
        test: /\.(svg|eot|ttf|woff|woff2)$/,
        use:'file-loader'

}

The end form of your karma config can be

// 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'],
     plugins: [
        require('karma-jasmine'),
        require("karma-webpack"),
        require('karma-chrome-launcher'),
        require('karma-sourcemap-loader'),
        require('karma-jasmine-html-reporter'),
        require('karma-coverage-istanbul-reporter'),
        require('@angular/cli/plugins/karma'),
         'karma-*'
       ],
      client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
      },
     files: [
       'unit_tests/index.js'
     ],
     preprocessors: {
       'unit_tests/index.js': ['webpack', 'sourcemap']
     },
     webpack: {
        resolve: {
          extensions: ['.ts', '.js', '.jsx'],
          alias: {
             components: 'components',
             services: 'services'
          }
         }, 
       module: {
       rules: [{
        test: /\.(svg|eot|ttf|woff|woff2)$/,
        use:'file-loader'

        },{
        test: /\.ts$/,
        loaders: [
          'awesome-typescript-loader',
          'angular2-template-loader'
        ]
      },
      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader'
         ],
        // exclude: [helpers.root('src/index.html')]
      },
      {
        test: /\.html$/,
        loader: 'raw-loader'
      }
    ]
  },
   devtool: 'inline-source-map'
  },
   reporters: ['progress'],
   port: 9876,
   colors: true,
   logLevel: config.LOG_INFO,
   autoWatch: true,
   browsers: ['Chrome'],
   singleRun: true,
   concurrency: Infinity
  });
};