更新到Angular 13后，单元测试失败

Question

在更新到Angular 13之后，我在Angular 12上运行的许多单元测试现在都失败了。我发现更令人沮丧的是，测试只有在一起运行时才失败，而当我用fdescribe隔离它们时却没有。

我读到在Angular 13中，teardown选项默认设置为true，所以我尝试在test.ts文件中全局退出：

getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(), {
teardown: { destroyAfterEach: false }
}
);

但这并没有奏效。

我的因果报应配置：

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-junit-reporter'),
require('karma-coverage'),
require('karma-mocha-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
],
client: {
clearContext: false, // leave Jasmine Spec Runner output visible in browser
jasmine: {
random: false,
},
},
coverageReporter: {
dir: require('path').join(__dirname, '../../coverage/cockpit'),
reporters: [
{ type: 'html', subdir: 'report-html' },
{ type: 'lcov', subdir: 'report-lcov' },
{ type: 'text-summary' },
],
fixWebpackSourcePaths: true,
},
junitReporter: {
outputDir: require('path').join(__dirname, '../../junit-report/cockpit'),
suite: 'cockpit',
outputFile: 'cockpit-tests-report.xml',
fixWebpackSourcePaths: true,
},
reporters: ['mocha', 'kjhtml', 'coverage', 'junit'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true,
});
};

在浏览器控制台中，我看到了很多以下错误：

NG0303:无法绑定到"ngTemplateOutlet"，因为它不是已知的"ng容器"的属性

我没什么主意了。

Answer 1

问题是由ngrx存储引起的。现在需要重置afterEach块中的选择器

afterEach(() => {
store.resetSelectors();
fixture.destroy();
TestBed.resetTestingModule();
});

Answer 2

您没有发布测试的副本，但我认为您可能需要在其中导入Angular CommonModule，如下所示：

import { CommonModule } from '@angular/common';

beforeEach(() => {
TestBed.configureTestingModule({
imports: [
CommonModule
]
}).compileComponents();
}));

Answer 3

对我有效的是，继续使用karma-coverage-istanbul-reporter

我的因果报应配置：

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'),
require('karma-sonarqube-unit-reporter'),
require('karma-mocha-reporter')
],
client: {
clearContext: false
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/frontend'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
sonarQubeUnitReporter: {
sonarQubeVersion: 'LATEST',
outputFile: 'reports/ut_report.xml',
overrideTestDescription: true,
testPaths: ['src'],
testFilePattern: '.spec.ts',
useBrowserName: false,
prependTestFileName: 'frontend'
},
reporters: ['mocha', 'kjhtml', 'coverage-istanbul'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['ChromeHeadlessNoSandbox'], 
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
singleRun: false,
restartOnFileChange: true,

});
};