使用 Jest 测试 Angular 中元素的 CSS 样式

Question

我在 Angular 项目中使用 Karma 和 Jasmine 编写了一个测试，可以判断某个元素是否按要求显示 - 效果很好 - 但该公司已决定切换到 Jest，但所有测试都不起作用。

\n

有谁知道如何让以下内容在 Jest 中工作？

\n

it('required checkbox label should be blue', () => {\n    fixture.detectChanges();\n    //----------------- is the label blue?\n    const e = fixture.debugElement.query(By.css("p-checkbox[required] > label")).nativeElement;\n    expect(getComputedStyle(e).color).toEqual('rgb(39, 109, 226)');\n});\n

\n

返回的测试是：

\n

 ComponentsComponent\n\xe2\x88\x9a should create the app (1457 ms)\n\xc3\x97 buttons should be blue (1270 ms)\n\n  \xe2\x97\x8f ComponentsComponent \xe2\x80\xba buttons should be blue\nexpect(received).toEqual(expected) // deep equality\n\nExpected: "rgb(39, 109, 226)"\nReceived: ""\n\n  159 |     fixture.detectChanges();\n  160 |     const e = fixture.debugElement.query(By.css(".p-button")).nativeElement;\n> 161 |     expect(getComputedStyle(e).backgroundColor).toEqual('rgb(39, 109, 226)');\n      |                                                 ^\n  162 |   });\n  163 |\n  164 | });\n\n  at src/app/features/components/components/components.component.spec.ts:161:49\n  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)\n  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)\n  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)\n  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)\n  at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4250:34)\n

\n