Jest-preset-angular: TypeError: __WEBPACK_IMPORTED_MODULE_1__utils_facade_browser__.b.getComputedStyle(...).getPropertyValue is not a function

Created on 14 Feb 2018 · 6Comments · Source: thymikee/jest-preset-angular

Source

tsupka

👍2 😕1

Most helpful comment

I solved it by adding this code to the setupJest.ts

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

eduardo704 on 7 Jun 2018

👍8 🎉3

All 6 comments

What was the solution to this problem? Because I'm having the same error while running the tests with Jest.

 FAIL  src\app\module\containers\sidenav\sidenav.component.spec.ts
  SidenavComponent
    × deve retornar uma instancia de SidenavComponent (1297ms)

  ● SidenavComponent › deve retornar uma instancia de SidenavComponent

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

      at StyleUtils.Object.<anonymous>.StyleUtils.lookupStyle (node_modules/@angular/src/lib/core/style-utils/style-utils.ts:89:47)
      at StyleUtils.Object.<anonymous>.StyleUtils.getFlowDirection (node_modules/@angular/src/lib/core/style-utils/style-utils.ts:54:22)
      at FlexDirective.Object.<anonymous>.BaseFxDirective._getFlowDirection (node_modules/@angular/src/lib/core/base/base.ts:159:1)
      at FlexDirective.Object.<anonymous>.FlexDirective._validateValue (node_modules/@angular/src/lib/flex/flex/flex.ts:166:23)
      at FlexDirective.Object.<anonymous>.FlexDirective._updateStyle (node_modules/@angular/src/lib/flex/flex/flex.ts:155:51)
      at FlexDirective.Object.<anonymous>.FlexDirective.ngOnChanges (node_modules/@angular/src/lib/flex/flex/flex.ts:113:12)
      at checkAndUpdateDirectiveInline (../../../../../execroot/angular/packages/core/src/view/provider.ts:201:15)
      at checkAndUpdateNodeInline (../../../../../execroot/angular/packages/core/src/view/view.ts:429:14)
      at checkAndUpdateNode (../../../../../execroot/angular/packages/core/src/view/view.ts:389:12)
      at debugCheckAndUpdateNode (../../../../../execroot/angular/packages/core/src/view/services.ts:429:44)

abalad on 25 May 2018

Hi, I don,t remember the solution exactly , because i.m out of company repository … I solved it by mocking getComputedStyle function to return object with propety getPropertyValue in global-mock-jest file

Odesláno z aplikace Pošta pro Windows 10

Od: Maicon Wagner
Odesláno:pátek 25. května 2018 15:28
Komu: thymikee/jest-preset-angular
Kopie: tsupka; State change
Předmět: Re: [thymikee/jest-preset-angular] TypeError:__WEBPACK_IMPORTED_MODULE_1__utils_facade_browser__.b.getComputedStyle(...).getPropertyValueis not a function (#122)

What was the solution to this problem? Because I'm having the same error while running the tests with Jest.
—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub, or mute the thread.

tsupka on 25 May 2018

I solved it by adding this code to the setupJest.ts

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

eduardo704 on 7 Jun 2018

👍8 🎉3

@eduardo704 I added it to the setup file but still experiencing the issue

I'm on Angular 7, but not sure if it's relevant

avatsaev on 23 Nov 2018

👀1 👍1

@eduardo704 I added it to the setup file but still experiencing the issue

I'm on Angular 7, but not sure if it's relevant

I got @eduardo704 solution working on Angular 9 w/jest. I am using Chart.js and my test for that component starting tossing errors related to this and Canvas stuff. I'm guessing our configs are different in package.json but this might help you and others facing problems:

setupJest.ts

import 'jest-preset-angular';
import './jestGlobalMocks.ts';
import 'jest-canvas-mock';

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

package.json
"jest": { "preset": "jest-preset-angular", "setupFilesAfterEnv": [ "<rootDir>/src/setupJest.ts" ] }, "jestSonar": { "reportPath": "coverage", "reportFile": "test-report.xml" }

MrGavintech on 4 Jun 2020

👍1

Note for IntelliJ users

I faced this problem while I was using intellij run/debug.

Even adding the mock into the jest-setup.js, intellij was not recognizing the configuration. Then, after some time looking for something into intellij I realized that by default intellij was using the angular cli as testing module, so I just explicity changed the configuration to use jest's module instead.