DEPRECATED: DI is instantiating a token "MockLocationStrategy" that inherits its @Injectable decorator but does not provide one itself

Question

While testing my Angular application I am getting deprecation warnings

'DEPRECATED: DI is instantiating a token "MockLocationStrategy" that inherits its @Injectable decorator but does not provide one itself. This will become an error in a future version of Angular. Please add @Injectable() to the "MockLocationStrategy" class.'

Below is a sample test throwing the warning

describe('BookComponent', () => {
  let component: BookComponent;
  let fixture: ComponentFixture<BookIssueComponent>;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
      ],
      declarations: [BookComponent]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BookComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

I believe the warning is because I updated my packages

Package                                   Current     Wanted    Latest  Location                                          
@angular-devkit/architect               0.1102.11  0.1102.13  0.1200.1  node_modules/@angular-devkit/architect               
@angular-devkit/build-angular           0.1102.11  0.1102.13    12.0.1  node_modules/@angular-devkit/build-angular           
@angular-eslint/builder                     4.2.0      4.3.0    12.0.0  node_modules/@angular-eslint/builder                 
@angular-eslint/eslint-plugin               4.2.0      4.3.0    12.0.0  node_modules/@angular-eslint/eslint-plugin           
@angular-eslint/eslint-plugin-template      4.2.0      4.3.0    12.0.0  node_modules/@angular-eslint/eslint-plugin-template  
@angular-eslint/schematics                  4.2.0      4.3.0    12.0.0  node_modules/@angular-eslint/schematics              
@angular-eslint/template-parser             4.2.0      4.3.0    12.0.0  node_modules/@angular-eslint/template-parser         
@angular/animations                       11.2.12    11.2.14    12.0.1  node_modules/@angular/animations                     
@angular/cdk                              11.2.11    11.2.13    12.0.1  node_modules/@angular/cdk                            
@angular/cli                              11.2.11    11.2.13    12.0.1  node_modules/@angular/cli                            
@angular/common                           11.2.12    11.2.14    12.0.1  node_modules/@angular/common                         
@angular/compiler                         11.2.12    11.2.14    12.0.1  node_modules/@angular/compiler                       
@angular/compiler-cli                     11.2.12    11.2.14    12.0.1  node_modules/@angular/compiler-cli                   
@angular/core                             11.2.12    11.2.14    12.0.1  node_modules/@angular/core                           
@angular/forms                            11.2.12    11.2.14    12.0.1  node_modules/@angular/forms                          
@angular/language-service                 11.2.12    11.2.14    12.0.1  node_modules/@angular/language-service               
@angular/platform-browser                 11.2.12    11.2.14    12.0.1  node_modules/@angular/platform-browser               
@angular/platform-browser-dynamic         11.2.12    11.2.14    12.0.1  node_modules/@angular/platform-browser-dynamic       
@angular/pwa                            0.1102.11  0.1102.13    12.0.1  node_modules/@angular/pwa                            
@angular/router                           11.2.12    11.2.14    12.0.1  node_modules/@angular/router                         
@angular/service-worker                   11.2.12    11.2.14    12.0.1  node_modules/@angular/service-worker                 
@ngrx/component                            11.1.1     11.1.1    12.0.0  node_modules/@ngrx/component                         
@ngrx/effects                              11.1.1     11.1.1    12.0.0  node_modules/@ngrx/effects                           
@ngrx/entity                               11.1.1     11.1.1    12.0.0  node_modules/@ngrx/entity                            
@ngrx/schematics                           11.1.1     11.1.1    12.0.0  node_modules/@ngrx/schematics                        
@ngrx/store                                11.1.1     11.1.1    12.0.0  node_modules/@ngrx/store                             
@ngrx/store-devtools                       11.1.1     11.1.1    12.0.0  node_modules/@ngrx/store-devtools                    
@tinymce/tinymce-angular                    4.2.2      4.2.3     4.2.3  node_modules/@tinymce/tinymce-angular                
@types/jasmine                             3.6.10      3.7.4     3.7.4  node_modules/@types/jasmine                          
@types/jasminewd2                           2.0.8      2.0.9     2.0.9  node_modules/@types/jasminewd2                       
@types/node                                15.0.1     15.6.0    15.6.0  node_modules/@types/node                             
@typescript-eslint/eslint-plugin           4.22.0     4.22.0    4.24.0  node_modules/@typescript-eslint/eslint-plugin        
@typescript-eslint/parser                  4.22.0     4.22.0    4.24.0  node_modules/@typescript-eslint/parser               
bootstrap                                   4.6.0      4.6.0     5.0.1  node_modules/bootstrap                               
eslint                                     7.25.0     7.26.0    7.26.0  node_modules/eslint                                  
eslint-plugin-import                       2.22.1     2.22.1    2.23.2  node_modules/eslint-plugin-import                    
eslint-plugin-jsdoc                        33.0.0     33.0.0    34.8.2  node_modules/eslint-plugin-jsdoc                     
google-libphonenumber                      3.2.19     3.2.21    3.2.21  node_modules/google-libphonenumber                   
ng2-pdf-viewer                              6.4.1      6.4.1     7.0.1  node_modules/ng2-pdf-viewer                          
rxjs                                        6.6.7      6.6.7     7.1.0  node_modules/rxjs                                    
snyk                                      1.580.0    1.605.0   1.605.0  node_modules/snyk                                    
tinymce                                     5.7.1      5.8.1     5.8.1  node_modules/tinymce                                 
typescript                                  4.1.5      4.1.5     4.2.4  node_modules/typescript  

I have tried to follow the discussion docs: RouterTestingModule should be added to Testing guide #34341 but I am not getting how to resolve this issue

But how do I provide my RouterTesting Module to solve this issue?

Answer 1

You could try providing some basic routes using withRoutes. I think that's expected (from reading the docs)

await TestBed.configureTestingModule({
      declarations: [MainMenuComponent, StubComponent],
      imports: [
        RouterTestingModule.withRoutes([
          { path: '', component: StubComponent },
        ]),
      ],
    }).compileComponents();

Answer 2

Providing routes using withRoutes didn't remove the warning for me. Instead providing MockLocationStrategy for LocationStrategy for each test importing RouterTestingModule worked for me.

import { MockLocationStrategy } from '@angular/common/testing';
import { RouterTestingModule } from '@angular/router/testing';

and then in TestBed.configureTestingModule

{ provide: LocationStrategy, useClass: MockLocationStrategy },

I found the answer here: https://github.com/angular/angular/issues/34341#issuecomment-864281500