Angular 单元测试导致 TypeError：无法读取 null 的属性“removeChild”

Question

我有一套针对一个中等规模的 Angular 项目的单元测试，但出现以下错误：

Error: Uncaught (in promise): TypeError: Cannot read property 'removeChild' of null
TypeError: Cannot read property 'removeChild' of null
    at AriaDescriber.push../node_modules/@angular/cdk/esm5/a11y.es5.js.AriaDescriber._createMessagesContainer (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/cdk/esm5/a11y.es5.js:268:31)
    at AriaDescriber.push../node_modules/@angular/cdk/esm5/a11y.es5.js.AriaDescriber._createMessageElement (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/cdk/esm5/a11y.es5.js:221:1)
    at AriaDescriber.push../node_modules/@angular/cdk/esm5/a11y.es5.js.AriaDescriber.describe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/cdk/esm5/a11y.es5.js:142:1)
    at MatTooltip.set [as message] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/material/esm5/tooltip.es5.js:263:1)
    at updateProp (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:22206:1)
    at checkAndUpdateDirectiveInline (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:21965:1)
    at checkAndUpdateNodeInline (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23264:1)
    at checkAndUpdateNode (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23226:1)
    at debugCheckAndUpdateNode (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23860:1)
    at debugCheckDirectivesFn (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23820:1)
    at resolvePromise (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:831:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:896:1
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:423:1)
    at AsyncTestZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.AsyncTestZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:698:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:317:1)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:422:1)
    at Zone../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:195:1)
    at drainMicroTaskQueue (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:601:1)

这发生在 2 个测试上，但在这些测试自己运行时不会发生（即，使用 fdescribe 而不是 describe 时）。

尽管调用堆栈中出现了什么，但我没有在代码或测试中使用MatToolTip 或removeChild。问题似乎发生在测试框架中。在这一点上，我不知道还能尝试什么。有没有人以前看过这个或者对去哪里有任何想法？

Answer 1

您的 DOM 缺少父级，可能拼写错误。这些通常很难找到，尤其是当 linter 没有找到文件位置时。下载 ReactJS DEV 浏览器插件，它在这些情况下会有所帮助

Answer 2

我在角度规格中也遇到了同样的问题。 我发现模块导入中缺少CdkTableModule。