Karma unit test error: You may need an appropriate loader to handle this file type

Question

I'm trying to make some unit tests using Karma and Jasmine in Typescript (Angular 4). The project that i'm working on is mostly done by others (I'm doing my internship at a company), and i developed only a small part of it.

The thing is that i need to make some tests, to test the components, and any other thing that i can. I don't have a special requirements. While trying to do this i've faced may problems, one is the one bellow

My test component.

import 'zone.js';
import 'reflect-metadata';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { BcsComponent } from '../app/pages/reports/bcs.component';

describe('Testing the Blood culture sets managed component', () => {

let comp: BcsComponent;
//let expectedTitle: string;
//let fixture: ComponentFixture<BcsComponent>;
//let titleEl: DebugElement;

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [],
    })
        .compileComponents(); // compile template and css
}));

});

If i uncomment the variables i get the following error

Uncaught Error: Module parse failed: 
C:\TreatUdv\SepsisFinderCore\SepsisFinder\Tests\statistics.component.spec.ts 
Unexpected token (14:12)
You may need an appropriate loader to handle this file type.
| describe('Testing the Blood culture sets managed component', () => {
| 
|     let comp: BcsComponent;
|     //let expectedTitle: string;
|     //let fixture: ComponentFixture<BcsComponent>;
at Object.<anonymous> (statistics.component.spec.ts:70)
at __webpack_require__ (statistics.component.spec.ts:20)
at statistics.component.spec.ts:63
at statistics.component.spec.ts:66

My karma.config.js is

module.exports = function (config) {
  config.set({
      basePath: './',
      frameworks: ['jasmine'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
      require('karma-webpack'),
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in 
browser
    },
coverageIstanbulReporter: {
  reports: [ 'html', 'lcovonly' ],
  fixWebpackSourcePaths: true
},
angularCli: {
  environment: 'dev'
},
mime: {
    'text/x-typescript': ['ts', 'tsx']
},
files: [
    { pattern: './Tests/statistics.component.spec.ts', watched: false },
],
preprocessors: {
    './Tests/statistics.component.spec.ts': ['webpack'],

},
exports: [
    { pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: true }
],

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

Can someone help me solve this problem. I'm trying like for two days to figure it out but can't. It't my first time i'm doing test using Karma

Karma unit test error: You may need an appropriate loader to handle this file type

0 Answers0