Angular 单元测试环境配置 (Jasmine & Karm

1. 测试框架 / 环境以及配置文件

Jasmine

Jasmine是一个面向行为驱动开发(BDD)的Javascript单元测试框架。

npm install -g jasmine
// 在项目中安装时，我使用的是下面这句
npm install karma-jasmine jasmine-core --save-dev

Karma

Karma是基于node.js的Javascript测试运行环境

npm install karma --save-dev

在angular项目中一顿这样的操作，你会看到 package.json 文件中多出来下面这些东西。

"jasmine-core": "^2.99.1",
”jasmine-spec-reporter": "~4.2.1",
"karma": "^1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",

karma.conf.js

angular项目中自己有的 karma.conf.js 配置文件，我啥也没改。大概搜了一下配置文件里写了点什么。参考的是这位大佬的文章https://segmentfault.com/a/1190000009737186

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    // 基础路径
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    // 加载的插件
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    // 插件【karma-coverage-istanbul-reporter】配置项
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    // 测试结果报告方式
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    // 日志等级
    logLevel: config.LOG_INFO,
    autoWatch: true,
    // 测试浏览器列表
    browsers: ['Chrome'],
    // 持续集成模式，true：表示浏览器执行测试后退出
    singleRun: false
  });
};

使用 ng test 命令运行一下， 默认端口号是 9876，打开浏览器就能看到测试报告了。

ng test运行效果
然后就可以在 xxx.spec.ts 文件中写测试代码咯！

---

有关 npm install 命令

• npm install xxx : 安装模块到项目目录
• npm install -g xxx: 安装模块到全局，安装的磁盘位置取决于npm config prefix 的位置
• npm install --save xxx: 安装模块到项目目录下，并在package文件的dependencies节点中写入依赖
• npm install --save-dev xxx: 安装模块到项目目录下，并在package文件的devDependencies节点写入依赖

---

遇到的问题

1. ERROR in node_modules/@types/jasmine/index.d.ts(138,47): error TS1005: ';' expected.
   在 ng test的时候报错了。原因是因为 @types/jasmine 和 typescript 版本问题。升级 typescript 到 2.9.2 之后就没问题了。

"@types/jasmine": "~2.8.6",
"typescript": "~2.9.2"

2. Failed: Template parse errors: Can't bind to 'routerLink' since it ... ...
   解决方案： 导入 RouterTestingModule

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FormsModule,
        PrimengModule,
        RouterTestingModule
      ],
      declarations: [ MemorySelectComponent]
    })
    .compileComponents();
  }));

3. NullInjectorError: No provider for HttpClient
   错误原因： 没有导入HttpClientTestingModule 模块

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FormsModule,
        PrimengModule,
        RouterTestingModule,
        HttpClientTestingModule
      ],
      declarations: [ MemorySelectComponent]
    })
    .compileComponents();
  }));

3. Failed: Template parse errors: Can't bind to 'routerLink' since it ... ...
   解决方案： 导入 RouterTestingModule

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FormsModule,
        PrimengModule,
        RouterTestingModule,
        HttpClientTestingModule
      ],
      declarations: [ MemorySelectComponent]
    })
    .compileComponents();
  }));

4. Error: StaticInjectorError(DynamicTestModule)
   原因是 Services 是要放在 providers 数组中的。我一开始放到 imports 中去了。

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FormsModule,
        PrimengModule,
        RouterTestingModule,
        HttpClientTestingModule
      ],
      declarations: [ MemorySelectComponent],
      providers: [ MessageService ]
    })
    .compileComponents();
  }));

运行的时候还遇到了很多坑，找到了几篇大佬写的博客，真的是及时雨。
https://segmentfault.com/a/1190000009769787
https://blog.csdn.net/prufeng/article/details/88178587