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 unit tests
• Add e2e tests
• Add documentation
• Expose setupAutoMocks function
• Wait for the release of jest@30.
• Blocked by fix: pass modulePath instead of moduleName to onGenerateMock callback (#15429) jestjs/jest#15482
• Wait for merge Upgrade jest to v30 #3175
• Test outputs
• Test manually created mocks (__mocks__)

---

Closes: #2908

[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?

[MillerSvt]

Why? Eslint enforces to 4

[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

[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

[MillerSvt]

@ahnpnl Since we have single cjs bundle, any imports (that replaced to require functions by compiler) from @angular/* packages is fails with error:

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

You can check this by run e2e esm tests. Do you have any idea how to deal with that?