要进行Angular 2+的单元测试,可以使用Karma测试运行器和Jasmine测试框架。下面是一个包含代码示例的解决方法:
npm install karma karma-jasmine karma-chrome-launcher jasmine-core @angular-devkit/build-angular --save-dev
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('@angular-devkit/build-angular/plugins/karma')
],
browsers: ['Chrome'],
singleRun: true,
files: [
'src/**/*.spec.ts'
],
preprocessors: {
'src/**/*.spec.ts': ['@angular-devkit/build-angular']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
concurrency: Infinity
});
};
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
template: '{{ message }}
'
})
export class MyComponentComponent {
message = 'Hello, World!';
}
import { TestBed, async } from '@angular/core/testing';
import { MyComponentComponent } from './my-component.component';
describe('MyComponentComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
MyComponentComponent
],
}).compileComponents();
}));
it('should create the component', () => {
const fixture = TestBed.createComponent(MyComponentComponent);
const component = fixture.componentInstance;
expect(component).toBeTruthy();
});
it('should display the correct message', () => {
const fixture = TestBed.createComponent(MyComponentComponent);
const component = fixture.componentInstance;
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('p').textContent).toContain('Hello, World!');
});
});
ng test
这将运行所有的单元测试,并输出结果。
希望这个解决方案对你有帮助!