feat: add automatic mock for angular entities (#2908)

[MillerSvt]

Summary

Currently, to mock Angular components, services, pipes, directives, and modules, we need to manually create stubs for them. This PR introduces a new way to automatically mock them. The process can be simplified as follows:

jest.mock('./component');

Test plan

Does this PR introduce a breaking change?

• Yes
• No

TODO

• Add mock transformer implementation
• Add tests for every supported Angular versions
• Add documentation
• Rewrite existing example projects
• Wait for the release of jest@30.
• Blocked by fix: pass modulePath instead of moduleName to onGenerateMock callback (#15429) jestjs/jest#15482

---

Closes: #2908

[MillerSvt]

@ahnpnl Hi! I've been working on it, and I was wondering what the best way to test it would be. Do you think I should test it in the examples projects or somewhere else? I think it should tested for every supported Angular version.

[ahnpnl]

@ahnpnl Hi! I've been working on it, and I was wondering what the best way to test it would be. Do you think I should test it in the examples projects or somewhere else? I think it should tested for every supported Angular version.

Hi, about this, I think we should have

• unit test if possible, preferably put here https://github.com/thymikee/jest-preset-angular/tree/main/src/utils which is related to my comment about utility function feat: add automatic mock for angular entities (#2908) #2953 (comment)

• e2e test: you can duplicate this https://github.com/thymikee/jest-preset-angular/tree/main/e2e/snapshot-serializers which contains base structure for an e2e test. Then you can set up your own e2e test for this PR changes. Since this mocking utility is independent from zone/zoneless, you just need to test in either zone or zoneless should be good?

• example app test: not needed since e2e can cover it. Example apps we try to keep it as close to Angular Hero app as possible

[ahnpnl]

Would you pls revert this?

[ahnpnl]

Since this is only available in Jest 30, would you pls change merge target branch of this repo to next?

[ahnpnl]

Besides, there are other Jest deps which need to be bumped together too. I think making a separate commit or PR to support Jest 30 first is necessary before this change

[MillerSvt]

Yes, I described it in the TODO section.

[ahnpnl]

Not everyone would want this enabled by default, we should provide a flag to enable it via options provided in

jest-preset-angular/setup-env/zone/index.js

Line 12 in 138ab34

const setupZoneTestEnv = (options) => {

[ahnpnl]

Besides, this file is only for testbed setup, we shouldn’t add mock here. It’s better that we provide a utility function which can be imported in a Jest setup file which is owned by the users.

For example

// my-setup-test-file.ts
import { setupAutoMockForComp } from ‘jest-preset-angular’

Or any names which fit the purpose :)

[ahnpnl]

The same comment like we have in zone

[ahnpnl]

Another thing is about documentation for this new feature, potentially a new file in https://github.com/thymikee/jest-preset-angular/tree/main/website/docs/guides

[MillerSvt]

@ahnpnl I moved this to src/automocks, but I cant test it, because of getting error:

Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation, specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

If I add useESM option to jest-src.config.ts, and enable experimental vm modules then I get next error:

    Must use import to load ES Module: /Users/s.v.zaytsev/IdeaProjects/jest-preset-angular/node_modules/@angular/core/fesm2022/core.mjs

    > 1 | import { ɵɵdefineInjectable, ɵgetInjectableDef, InjectableType, Type } from '@angular/core';

But it already is import... If I add extensionsToTreatAsEsm: ['.ts'], I get next error:

    ReferenceError: exports is not defined

      1 | import { stubInjectable } from './stub-injectable';
    > 2 |
        | ^
      3 | describe('stubInjectable', () => {
      4 |     it('should stub root service', () => {

I cant understand whats wrong...

[ahnpnl]

@ahnpnl I moved this to src/automocks, but I cant test it, because of getting error:

Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation, specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

If I add useESM option to jest-src.config.ts, and enable experimental vm modules then I get next error:

    Must use import to load ES Module: /Users/s.v.zaytsev/IdeaProjects/jest-preset-angular/node_modules/@angular/core/fesm2022/core.mjs

    > 1 | import { ɵɵdefineInjectable, ɵgetInjectableDef, InjectableType, Type } from '@angular/core';

But it already is import... If I add extensionsToTreatAsEsm: ['.ts'], I get next error:

    ReferenceError: exports is not defined

      1 | import { stubInjectable } from './stub-injectable';
    > 2 |
        | ^
      3 | describe('stubInjectable', () => {
      4 |     it('should stub root service', () => {

I cant understand whats wrong...

Which test command did you run? Did you try with yarn test-cjs?

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud