JEST - Cannot find module 'ngx-toastr' from ...

[turbo-xav]

Hello,

I try to run unit tests with JEST after installing ngx-toastr. An error message is triggered like this one :

**Test suite failed to run**

    Cannot find module 'ngx-toastr' from 'src/app/core/services/snack-bar.service.ts'

    Require stack:
      src/app/core/services/snack-bar.service.ts
      src/app/core/common/dili-crud-form-ws/dili-crud-form-ws.component.ts
      src/app/shared/shared.module.ts
      src/app/core/services/snack-bar.service.spec.ts

      1 | import { Injectable } from '@angular/core';
      2 | import { TranslateService } from '@ngx-translate/core';
    > 3 | import { ToastrService } from 'ngx-toastr';
        | ^
      4 |

This "import" problem occurs only during JEST tests, not with NPM start.

The service to test snack-bar.service.ts

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ToastrService } from 'ngx-toastr';

import { SnackBarEnum } from 'src/app/shared/enum/snack-bar.enum';

@Injectable({
  providedIn: 'root'
})
export class SnackBarService {

  constructor(
    public toastr: ToastrService,
    public  translateService: TranslateService

  ) { }

  displaySnackbar(type: string, key: string): void {
    this.translateService.get([key]).subscribe(translations => {
      if(type == SnackBarEnum.error) {
        this.toastr.error(translations[key], '', {
          timeOut: 5000
        });
      } else if(type == SnackBarEnum.success) {
        this.toastr.success(translations[key], '', {
          timeOut: 5000
        });
      }
    })
  }
}

The test file snack-bar.service.spec.ts

import { TestBed } from '@angular/core/testing';
import { SharedModule } from 'src/app/shared/shared.module';
import { CoreModule } from '../core.module';

import { SnackBarService } from './snack-bar.service';

describe('SnackBarService', () => {
  let service: SnackBarService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        SharedModule,
        CoreModule]
    });
    service = TestBed.inject(SnackBarService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

Toastr module is inluded into Shared.module.ts

...
imports: [
        CommonModule,
        TranslateModule,
        MaterialModule,
        AngularSplitModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        ToastrModule.forRoot()
    ],
...

Angular CLI: 12.2.14 Node: 14.18.21 Package Manager: npm 6.14.13 OS: win32 x64

Package Version

Package.json

"dependencies": { "@angular/animations": "^12.2.14", "@angular/cdk": "^12.2.13", "@angular/common": "^12.2.14", "@angular/compiler": "^12.2.14", "@angular/core": "^12.2.14", "@angular/forms": "^12.2.14", "@angular/material": "^12.2.13", "@angular/platform-browser": "^12.2.14", "@angular/platform-browser-dynamic": "^12.2.14", "@angular/router": "^12.2.14", "@auth0/angular-jwt": "^5.0.1", "@ngx-translate/core": "^13.0.0", "@ngx-translate/http-loader": "^6.0.0", "angular-google-charts": "^2.2.2", "angular-split": "^3.0.2", "file-saver": "^2.0.2", "material-design-icons-iconfont": "6.1.0", "ngx-toastr": "^15.0.0", "rxjs": "^6.6.0", "tslib": "^2.0.0", "zone.js": "^0.11.6" }, "devDependencies": { "@angular-builders/jest": "^11.0.0", "@angular-devkit/build-angular": "^12.2.14", "@angular-eslint/builder": "1.2.0", "@angular-eslint/eslint-plugin": "1.2.0", "@angular-eslint/eslint-plugin-template": "1.2.0", "@angular-eslint/schematics": "1.2.0", "@angular-eslint/template-parser": "1.2.0", "@angular/cli": "^12.2.14", "@angular/compiler-cli": "^12.2.14", "@angular/language-service": "^12.2.14", "@compodoc/compodoc": "^1.1.19", "@release-it/bumper": "^2.0.0", "@types/file-saver": "^2.0.5", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/jest": "^26.0.4", "@types/node": "^14.18.21", "@typescript-eslint/eslint-plugin": "4.3.0", "@typescript-eslint/parser": "4.3.0", "codelyzer": "^6.0.0", "eslint": "^7.6.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "eslint-plugin-prettier": "^3.3.1", "http-server": "^0.12.3", "jest": "^26.1.0", "jest-extended": "^0.11.5", "jest-html-reporter": "^3.5.0", "jest-junit": "^12.0.0", "jest-preset-angular": "^8.4.0", "jest-sonar": "^0.2.10", "json": "^9.0.6", "ng-packagr": "^12.2.6", "prettier": "^2.7.1", "release-it": "^14.14.3", "ts-jest": "^26.1.2", "ts-node": "^9.1.1", "typescript": "4.3.5", "webpack-bundle-analyzer": "^4.1.0" }

Can you Help me please ?

Thanks Xavier

[FliCrz]

You need to import ToastrModule in your test file.

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        SharedModule,
        CoreModule,
        ToastrModule.forRoot()
        ]
    });
    service = TestBed.inject(SnackBarService);
  });

You may not need the forRoot() call depending in where you configured your ToastrModule.

Else you if you have declared it in your imported SharedModule, make sure it is properly exported in that same module.