Also mock getPropertyValue as global mock

[melroy89]

Is your feature request related to a problem? Please describe.

When using Angular with jest @angular-builders/jest, I will get the following error when running my tests:

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

This will make the test fail. Which is caused by a missing mock implementation (triggered via fixture.detectChanges()).

Describe the solution you'd like

Add an additional mock for the method getPropertyValue in your existing computed-style.js global mock file.

Describe alternatives you've considered

Removing fixture.detectChanges() (NOT ideal), or manually mocking this while you already provided a mock.

This involves creating a new jest.setup.ts file into the src folder. Add the following to the file:

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

Then also update the jest.config.js file with setupFilesAfterEnv section:

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/jest.setup.ts'],
  globalSetup: 'jest-preset-angular/global-setup'
};

Additional context

Upstream project issue: jsdom/jsdom#2363 (comment)

Related (other project) issue: telerik/kendo-angular#1505 (comment)

[just-jeb]

Thanks for posting this!
So getComputedStyle has a default implementation in jsdom and the mock isn't really necessary anymore. It's enabled by default for backwards compatibility but you can disable it by passing your own list of mocks, like mentioned in the docs.

That said we're before the release of major version so it's a good time to change the default list 👍.

[melroy89]

Yea indeed, it was even failing on the next tag, it would be awesome it get this fixed in the next major release.

[melroy89]

Great I will test 16.0.0-beta.3 using the next tag.

[melroy89]

@just-jeb This specific problem seems to be solved! No manual mock required.

I only notice one other issue with Jest.. I put the error message at the end (see bottom)..

But I already HAVE the following at the top of main.ts file: /// <reference types="@angular/localize" />. As well as tsconfig.app.json and tsconfig.app.spec.json has "@angular/localize" declared as well. Which I thought should be sufficient. Yes I already ran ng add @angular/localize.

As a workaround I still need a jest.setup.ts file, containing only this:

import '@angular/localize/init'

Maybe I need to also add this include to the main.ts file? NOPE not working.

I'm confused. Btw ng build works fine. Also note that in Angular 16 you don't need polyfills.ts anymore.

Error message when running ng test:

 › should create

    It looks like your application or one of its dependencies is using i18n.
    Angular 9 introduced a global `$localize()` function that needs to be loaded.
    Please run `ng add @angular/localize` from the Angular CLI.
    (For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.
    For server-side rendering applications add the import to your `main.server.ts` file.)

      at Object.<anonymous>._global.$localize (node_modules/@angular/core/fesm2022/core.mjs:30290:15)
      at consts (ng:/JournalListComponent.js:271:18)
      at createTView (node_modules/@angular/core/fesm2022/core.mjs:11043:60)
      at getOrCreateComponentTView (node_modules/@angular/core/fesm2022/core.mjs:11018:28)
      at createRootComponentView (node_modules/@angular/core/fesm2022/core.mjs:13181:49)
      at ComponentFactory.create (node_modules/@angular/core/fesm2022/core.mjs:13064:35)
      at initComponent (node_modules/@angular/core/fesm2022/testing.mjs:26310:51)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:416:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3728:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:415:56)
      at Object.onInvoke (node_modules/@angular/core/fesm2022/core.mjs:26156:33)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:415:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:173:47)
      at NgZone.run (node_modules/@angular/core/fesm2022/core.mjs:26010:28)
      at _TestBedImpl.createComponent (node_modules/@angular/core/fesm2022/testing.mjs:26313:41)
      at Function.createComponent (node_modules/@angular/core/fesm2022/testing.mjs:26120:37)
      at src/app/journal/journal-list/journal-list.component.spec.ts:32:23
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:416:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3728:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:415:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:173:47)
      at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4208:34)

[just-jeb]

Seems like it's not a workaround, this is what you actually need to do: thymikee/jest-preset-angular#347 (comment).