Angular 4 Webpack环境下Karma/Jasmine/Protractor测试问题求助

Hey there! Let's work through each of your testing issues step by step, using the configs and code you provided:

1. Karma HTML Loader Not Loading & Module Errors in Debug #

First, that "Karma v1.7.0 connected" message without the interactive test UI usually means you're not leveraging the HTML reporter you've installed. Looking at your karma.conf.js, you have karma-jasmine-html-reporter in dev dependencies but it's not added to your reporters list. Here's how to fix that:

• Update your reporters array in karma.conf.js to include the HTML reporter (it uses the alias kjhtml):

  reporters: ['progress', 'kjhtml'],
  

• Also, double-check your boot-tests.ts file—make sure it's importing all your spec files. A reliable pattern to auto-import all .spec.ts files is:

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

For the module errors in the Karma browser: Your app runs fine, but tests fail because your Webpack test config might not handle all file types correctly. Ensure your webpack config includes loaders for .html and .css files using angular2-template-loader and raw-loader (you have these dependencies, just confirm they're part of the test webpack pipeline).

2. Component Tests Fail in Webpack Version but Work in CLI #

Angular CLI handles a lot of test setup automatically, but in a Webpack project you need to explicitly declare all dependencies for your components. Your ManageMarketComponent test is likely failing because:

• The component uses directives, pipes, or external modules (like PrimeNG components, since you have primeng installed) that aren't imported in your TestBed configuration. For example:

  import { InputTextModule } from 'primeng/inputtext'; // Adjust based on your component's dependencies
  
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ManageMarketComponent],
      imports: [InputTextModule] // Add any required modules here
    })
    .compileComponents();
  }));
  

• Also, verify that your Webpack config for tests includes angular2-template-loader to inline component templates and styles, which is required for testing standalone components.

3. Do I Need to Manually Add protractor.js? #

Yes, you'll need to set up Protractor manually for your Webpack project. Here's the quick process:

1. Run npx protractor init in your project root—this generates a default protractor.conf.js file.
2. Adjust the config to work with your Webpack setup: you can use protractor-webpack to bundle your e2e tests, or update the specs path to point to your e2e test files.
3. Add an e2e script to your package.json:

   "scripts": {
     "test": "karma start ClientApp/test/karma.conf.js",
     "e2e": "protractor protractor.conf.js"
   }
   

4. How to Configure Karma to Get HTML View #

You already have the right dependency (karma-jasmine-html-reporter) to get the interactive HTML test view. Just update your karma.conf.js with these changes:

• Add kjhtml to the reporters array (as mentioned in issue 1):

  reporters: ['progress', 'kjhtml'],
  

• Optionally, explicitly declare the plugin to ensure it loads (though it should auto-load if installed):

  plugins: [
    require('karma-jasmine'),
    require('karma-chrome-launcher'),
    require('karma-webpack'),
    require('karma-jasmine-html-reporter')
  ],
  

• When you run npm test, the Karma browser will open—click the "Debug" button to see the full HTML test runner with all your tests listed and interactive results.

Your Config Files for Reference #

package.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.conf.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' } }); };

Component Test (spec.ts)

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(); }); });

内容的提问来源于stack exchange，提问作者baby