Jasmine HTML loader is not loading in angular 4 webpack

I am trying to unit test my angular app.as am new to this karama test i am trying to karma,jasmine and protractor..i ve downloaded and all karma dependencies.i am using angular webpack version in visual studio 2017.i am facing some issues like

1.karma html loader is not loading,only i can see karma v1.7.0 is connected,while debugging am getting module error in karma browser but application works fine

2.i have done a component testing but its showing error..in CLI version its working

3.i ve downloaded protractor do i need to add protractor.js manually?

4.How to configure karma in webpack version to get html view

What I have tried:

my pakage.json
{
"name": "EfficiencyClassWebApp",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"dependencies": {
"@angular/animations": "4.2.5",
"@angular/common": "4.2.5",
"@angular/compiler": "4.2.5",
"@angular/compiler-cli": "4.2.5",
"@angular/core": "4.2.5",
"@angular/forms": "4.2.5",
"@angular/http": "4.2.5",
"@angular/platform-browser": "4.2.5",
"@angular/platform-browser-dynamic": "4.2.5",
"@angular/platform-server": "4.2.5",
"@angular/router": "4.2.5",
"@ngtools/webpack": "1.5.0",
"@types/webpack-env": "1.13.0",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css": "2.2.1",
"css-loader": "0.28.4",
"csvtojson": "^1.1.9",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"ngx-papaparse": "^1.2.5",
"preboot": "4.5.2",
"primeng": "^5.0.0",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"toastr-ng2": "^4.1.1",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"web-animations-js": "^2.3.1",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"@types/chai": "4.0.1",
"@types/jasmine": "2.5.53",
"@types/rx": "^4.1.1",
"chai": "4.0.2",
"jasmine-core": "2.6.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"protractor-webpack": "^1.1.0",
"webpack": "1.13.1",
"html-loader": "0.4.3",
"babel-loader": "5.3.2",
"html-webpack-plugin": "1.6.1",
"rimraf": "^2.5.3",
"run-sequence": "1.1.2",
"karma-coverage": "^0.5.3",
"loader-utils": "^0.2.12",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-mocha-reporter": "^2.2.2",
"karma-remap-istanbul": "^0.6.0"
}
}
karma.config.js
module.exports = function (config) {
config.set({
basePath: '.',
frameworks: ['jasmine'],
files: [
'../../wwwroot/dist/vendor.js',
'./boot-tests.ts'
],
preprocessors: {
'./boot-tests.ts': ['webpack']
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
mime: { 'application/javascript': ['ts','tsx'] },
singleRun: false,
webpack: require('../../webpack.config.js')().filter(config =>
config.target !== 'node'), // Test against client bundle, because
tests run in a
browser
webpackMiddleware: { stats: 'errors-only' }
});
};
my spec.ts/component test
import { async, ComponentFixture, TestBed } from
'@angular/core/testing';
import { } from 'jasmine';
import { ManageMarketComponent } from './marketdetails.component';
describe('ManageMarketComponent', () => {
let component: ManageMarketComponent;
let fixture: ComponentFixture<ManageMarketComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ManageMarketComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ManageMarketComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('ManageMarketComponent is created ', () => {
expect(component).toBeTruthy();
});
});

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sujeet Raman8y ago
same followed .in unit testing am getting issues..to load in html
Debasis Saha8y ago
For the Jasmine Framework with Angular 4 Unit test u can check the below links -

https://www.c-sharpcorner.com/article/learn-angular-4-0-in-10-days-day-nine/