时间戳

首页 > 解决方案 > 无法在 Angular + Karma 中正确测试不属于项目目录的文件

angular - 无法在 Angular + Karma 中正确测试不属于项目目录的文件

问题描述

我有以下文件结构：

两个项目（App 和 Lib）都是使用 Angular CLI 构建的（angular.json 到目前为止没有改变，除了codeCoverage选项）。我无法运行属于shared目录的测试：

我认为应用程序的问题是覆盖率报告者没有看到shared目录，尽管测试（甚至最终报告）包括这些（它只显示src在项目中）

至于图书馆，我想这与 Karma 如何解析路径有关，以便 Typescript 可以看到它们。

我的test.ts文件（仅添加了其他路径）：

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/dist/zone-testing-bundle';

import { getTestBed } from '@angular/core/testing'; // tslint:disable-line
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

// Then we find all the tests.
const projectContext = require.context('./', true);
const sharedContext = require.context('../../../shared', true);

// And load the modules.
sharedContext.keys().map(sharedContext);
projectContext.keys().map(projectContext);

我的karma.conf.js：

// 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: '../../shared',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-mocha-reporter'),
      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
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['mocha'],
    mochaReporter: {
      ignoreSkipped: true
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    singleRun: false,
  });
};

我的tsconfig.spec.json（我试图修改路径，但没有帮助）：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "../../",
    "rootDir": "../../",
    "outDir": "../../out-tsc/spec",
    "types": [
      "jasmine",
      "node"
    ],
    "module": "esnext",
    "inlineSources": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "importHelpers": true,
    "preserveSymlinks": true
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.spec.ts",
    "../../shared/**/*.ts",
    "../../shared/**/*.spec.ts"
  ],
  "exclude": []
}

有任何想法吗？

标签： angularjasmineangular-clikarma-runneristanbul

解决方案

问题归结为shared在编译中包含两次文件。如下就足够了projectContext.keys()：test.ts

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/dist/zone-testing-bundle';

import { getTestBed } from '@angular/core/testing'; // tslint:disable-line
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

// Then we find all the tests.
const projectContext = require.context('./', true);

// And load the modules.
projectContext.keys().map(projectContext);

这是有效的，因为shared在lib目录中是符号链接的。由于 Git 的实现，Symlink 甚至可以在 Unix/Windows 之间移植。那解决了！

所以总结一下：

  • 将符号链接添加到shared项目内的目录而不是使用真实目录
  • 删除重复的require.context
  • 使用符号链接目录中的文件，而不是在项目之外使用两条路径

推荐阅读