[Bug] Testing: TypeError: getComputedStyle(...).getPropertyValue is not a function

[mcblum]

I'm submitting a...

• Bug report

Current behavior

I'm using Jest to run our tests and we're seeing an error when the InputsModule is included for testing. Here's the error:

 TypeError: getComputedStyle(...).getPropertyValue is not a function

      80 |         fixture = TestBed.createComponent(SchemaFieldPropertiesEditorComponent);
      81 |         component = fixture.componentInstance;
    > 82 |         fixture.detectChanges();
      83 |     });
      84 |
      85 |     it("should create", () => {

and a bit of the stack trace:

at computedProp (node_modules/@progress/kendo-angular-resize-sensor/dist/npm/resize-sensor.component.js:12:41)
      at ResizeSensorComponent.Object.<anonymous>.ResizeSensorComponent.ngAfterViewChecked (node_modules/@progress/kendo-angular-resize-sensor/dist/npm/resize-sensor.component.js:69:13)
      at callProviderLifecycles (node_modules/packages/core/esm5/src/view/provider.js:597:2)
      at callElementProvidersLifecycles (node_modules/packages/core/esm5/src/view/provider.js:561:12)
      at callLifecycleHooksChildrenFirst (node_modules/packages/core/esm5/src/view/provider.js:544:2)

Here's the testbed we're using:

 TestBed.configureTestingModule({
                declarations: [
                    SchemaFieldPropertiesEditorComponent,
                    NmSwitchComponent
                ],
                imports: [
                    FormsModule,
                    BrowserModule,
                    BrowserAnimationsModule,
                    MatDialogModule,
                    RouterTestingModule,
                    MatMenuModule,
                    ReactiveFormsModule,
                    ConfirmationDialogsModule,
                    InputsModule
                ],

System:

• TypeScript version: 2.4
• Node version: 9
• Platform: Mac

[mcblum]

Just a quick update, if I remove fixture.detectChanges(); from the test, it passes.

[tsvetomir]

The error can be worked around by mocking getPropertyValue in your setup file:

Object.defineProperty(window, 'getComputedStyle', {
    value: () => ({
        getPropertyValue: (prop) => {
            return '';
        }
    })
});

We may add feature detection if this is a common problem in customers tests. For now, we prefer to keep the code free of JSDOM-specific workarounds.

[mcblum]

@tsvetomir thank you! I added it to setupJest.ts and all is working. I Googled for days on this one - hopefully someone else will find this if they need it.

[jamesmart77]

Thank you @tsvetomir! This just made it really easy!

[brandonpittman]

AFAICT, the mock isn't even necessary anymore.

[tsvetomir]

@brandonpittman thanks for pointing this out. The default JSDOM implementation seems to work fine in the current version.

[murilodevkapaz]

The error can be worked around by mocking getPropertyValue in your setup file:

Object.defineProperty(window, 'getComputedStyle', {
    value: () => ({
        getPropertyValue: (prop) => {
            return '';
        }
    })
});

We may add feature detection if this is a common problem in customers tests. For now, we prefer to keep the code free of JSDOM-specific workarounds.

Worked for me! But I have a question: How do I mock more than once, with multiples values?

[tsvetomir]

@murilodevkapaz you won't be able to identify the element with the property syntax. Maybe overriding the function would help:

window.getComputedStyle = (element) => {
    // test for element here
    
    return {
        getPropertyValue: (prop) => {
            // and for prop here
            return '';
        }
    };
};

[wizarion]

The error can be worked around by mocking getPropertyValue in your setup file:

Object.defineProperty(window, 'getComputedStyle', {
    value: () => ({
        getPropertyValue: (prop) => {
            return '';
        }
    })
});

We may add feature detection if this is a common problem in customers tests. For now, we prefer to keep the code free of JSDOM-specific workarounds.

Thank you very much, sir! Helped a lot!