Problem with mocking of RouterModule (Angular 14 + Jest)

In the process of updating my project to angular 14, in which I am using Jest and Shallow-render for unit tests, I noticed a problem with mocking of RouterModule. Unit tests failed with the following error message.

  AppComponent
    ✕ should match snapshot (11 ms)

  ● AppComponent › should match snapshot

    MockOfRouterOutlet does not have a module def (ɵmod property)

      11 |
      12 |   it('should match snapshot', async () => {
    > 13 |     const { fixture } = await shallow.render();
         |                                       ^
      14 |
      15 |     expect(fixture).toMatchSnapshot();
      16 |   });

      at transitiveScopesFor (node_modules/@angular/core/fesm2020/core.mjs:24497:11)
          at Array.forEach (<anonymous>)
          at Array.forEach (<anonymous>)
          at Array.forEach (<anonymous>)
      at src/app/app.component.spec.ts:13:39
      at src/app/app.component.spec.ts:12:42

  ● AppComponent › should match snapshot

    MockOfRouterOutlet does not have a module def (ɵmod property)

      at transitiveScopesFor (node_modules/@angular/core/fesm2020/core.mjs:24497:11)
          at Array.forEach (<anonymous>)
          at Array.forEach (<anonymous>)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        4.101 s, estimated 13 s

Minimal reproduction of the problem

You can reproduce the issue by running ng test for the project in my repo where you find a simple Angular 14 project with Jest 28 (added with @angular-builders/jest) and Shallow-render 14.

npm i
ng test

[mfrey-WELL]

I had the same issue and saw in the example test that they used RouterTestingModule instead of RouterModule. Adding a global replacement fixed it for me: Shallow.alwaysReplaceModule(RouterModule, RouterTestingModule);

[jebner]

For us it didn’t work to provide a mock for Router using shallow.provide({ provide: Router, useValue: mockRouter }) as suggested by @floisloading. Because when adding dontMock(RouterModule) e.g. the RouterLinkWithHref directive seemed to need some of the other methods on Router (TypeError: Cannot read properties of undefined (reading 'subscribe') at new RouterLinkWithHref). If we don’t add dontMock(RouterModule) we get errors like described above: MockOfRouterOutlet does not have a module def (ɵmod property). Similar problems for using replaceModule(RouterModule, RouterTestingModule).

But we could fix the problem by only mocking a single method on the Router like this:

        const rendering = await shallow
            // [...] mocks etc. for router unrelated things
            .dontMock(RouterModule, ActivatedRoute)
           .provide({provide: ActivatedRoute, useValue: {
                data: activatedRouteData.asObservable(),
                queryParams: activatedRouteQueryParams.asObservable()
            }})
            .render();

        router = rendering.inject(Router);

        spyOn(router, "navigate").and.callFake((commands: any[], extras?: NavigationExtras) => {
            activatedRouteQueryParams.next(extras?.queryParams || {});
            return Promise.resolve(true);
        });