Support angular

[splincode]

Support angular

[infodusha]

+1 and for now we have this

[Brooooooklyn]

Try this config:

// jest.config.js

module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc-node/jest',

      // configuration
      {
        dynamicImport: true,
        experimentalDecorators: true,
        emitDecoratorMetadata: true,
      },
    ],
  },
}

[infodusha]

Sure, that fixes decorator issues but here is the next one

[Brooooooklyn]

After some investigation, I found that Angular need custom transform for Angular template , which is not supported by SWC now.

[sod]

Angular doesn't support lazy loading/resolving templates at runtime in node.js. Thats why https://yarnpkg.com/package/jest-preset-angular replaces templateUrl: './foo.html with template: '<!-- foo.html contents -->' at transform time.

[rottmann]

Same for NestJS.

[DasGandlaf]

Is there any news on this?

[thais-molica]

Any plans on supporting angular?

[splincode]

@mgechev Hi! Do you (or your team) have a plan?

[sod]

You already can do component testing with jest and swc. I wrote the https://gist.github.com/sod/07078bb93a292f0a9ebf5a246b34828d file. Import it in your entry file you configured in jest via setupFilesAfterEnv.

The file overwrites the Component annotation of the @angular/core module and rewrites styleUrls: string[] into styles: string[] and templateUrl: string into template: string at runtime, and uses require(...) to resolve those urls from the context of the component.

Be sure to add jest transformers for html and css (or e.g. scss if you use sass) so jest can handle those requires. The html transformer can return the html as plaintext, angular JIT will compile it at runtime. The sass transformer though has to compile in jest as angular JIT only understands css.

[splincode]

@sod Do you have project example on github?)

[sod]

sure, here you go @splincode - https://github.com/sod/angular-jest-swc - follow instructions in readme

[splincode]

In our project with your setup

[hudsontavares]

@splincode - which Angular version are you running? Not sure if that's the case, but @sod's example uses Angular 15.

[infodusha]

So @sod's example actually works, but the thing with mocking component is sometimes you can get an error:

Error: NG0202: This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.

Please check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.

My guess here is that is not actually a proper way - to mock @Component directive. Would be great if there were a thing that does this templateUrl to template transform not in the runtime but somewhere in transformations.

[Henry-Brinkman]

+1

[koraxos]

+1

[haskelcurry]

+1

[vojtesaak]

+1

[hardikpatel043]

@sod's example seems to be working. Only thing wanted to know how do i pass tsconfig.json path which i pass like below while using jest-preset-angular

transform: { '^.+.(ts|mjs|js|html)$': [ 'jest-preset-angular', { tsconfig: '/tsconfig.spec.json', stringifyContentPathRegex: '\.(html|svg)$', isolatedModules: true } ] },

[michal-materowski]

+1

[Trojan13]

+1

[ammaraldirawi]

+1

[brunovinicius]

+1

[vojtesaak]

+1