Get Jest to test the CSS styles of an element in Angular

Viewed 296

I wrote a test with Karma and Jasmine in an Angular project that can tell if an element is showing as required - that works great - but the company has decided to switch to Jest and none of the tests work.

Does anyone know how to get the following to work in Jest?

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

The returned test is:

 ComponentsComponent
√ should create the app (1457 ms)
× buttons should be blue (1270 ms)

  ● ComponentsComponent › buttons should be blue
expect(received).toEqual(expected) // deep equality

Expected: "rgb(39, 109, 226)"
Received: ""

  159 |     fixture.detectChanges();
  160 |     const e = fixture.debugElement.query(By.css(".p-button")).nativeElement;
> 161 |     expect(getComputedStyle(e).backgroundColor).toEqual('rgb(39, 109, 226)');
      |                                                 ^
  162 |   });
  163 |
  164 | });

  at src/app/features/components/components/components.component.spec.ts:161:49
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
  at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
  at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4250:34)
0 Answers
Related