diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts
index 1b0d4a5a4c..90b49e8efb 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts
@@ -5,18 +5,18 @@ import { ConfigState, ABP } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-breadcrumb',
-  templateUrl: './breadcrumb.component.html'
+  templateUrl: './breadcrumb.component.html',
 })
 export class BreadcrumbComponent implements OnInit {
   show: boolean;
 
   segments: string[] = [];
 
-  constructor(private router: Router, private store: Store) {
-    this.show = !!this.store.selectSnapshot(state => state.LeptonLayoutState);
-  }
+  constructor(private router: Router, private store: Store) {}
 
   ngOnInit(): void {
+    this.show = !!this.store.selectSnapshot(state => state.LeptonLayoutState);
+
     const splittedUrl = this.router.url.split('/').filter(chunk => chunk);
 
     const currentUrl: ABP.FullRoute = this.store.selectSnapshot(ConfigState.getRoute(splittedUrl[0]));
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/breadcrumb.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/breadcrumb.component.spec.ts
index cb37315f53..85b3729bf7 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/breadcrumb.component.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/breadcrumb.component.spec.ts
@@ -1,9 +1,15 @@
-import { LocalizationPipe, ABP } from '@abp/ng.core';
-import { RouterTestingModule } from '@angular/router/testing';
+import { LocalizationPipe } from '@abp/ng.core';
+import { Directive } from '@angular/core';
+import { Router } from '@angular/router';
 import { createComponentFactory, Spectator, SpyObject } from '@ngneat/spectator/jest';
 import { Store } from '@ngxs/store';
 import { BreadcrumbComponent } from '../components/breadcrumb/breadcrumb.component';
-import { Router } from '@angular/router';
+
+@Directive({
+  // tslint:disable-next-line: directive-selector
+  selector: '[routerLink], [routerLinkActive]',
+})
+class DummyRouterLinkDirective {}
 
 describe('BreadcrumbComponent', () => {
   let spectator: Spectator<BreadcrumbComponent>;
@@ -11,8 +17,8 @@ describe('BreadcrumbComponent', () => {
   const createComponent = createComponentFactory({
     component: BreadcrumbComponent,
     mocks: [Store, Router],
-    imports: [RouterTestingModule],
-    declarations: [LocalizationPipe],
+    imports: [],
+    declarations: [LocalizationPipe, DummyRouterLinkDirective],
     detectChanges: false,
   });
 
@@ -24,14 +30,20 @@ describe('BreadcrumbComponent', () => {
   it('should display the breadcrumb', () => {
     const router = spectator.get(Router);
     (router as any).url = '/identity/users';
-    store.selectSnapshot.andReturn({
+    store.selectSnapshot.mockReturnValueOnce({ LeptonLayoutState: {} });
+    store.selectSnapshot.mockReturnValueOnce({
       name: 'Identity',
       children: [{ name: 'Users', path: 'users' }],
     });
-    spectator.component.show = true;
+    // for abpLocalization
+    store.selectSnapshot.mockReturnValueOnce('Identity');
+    store.selectSnapshot.mockReturnValueOnce('Users');
     spectator.detectChanges();
-    spectator.detectComponentChanges();
+
     expect(spectator.component.segments).toEqual(['Identity', 'Users']);
-    // expect(spectator.queryAll('li')).toHaveLength(3);
+    const elements = spectator.queryAll('li');
+    expect(elements).toHaveLength(3);
+    expect(elements[1]).toHaveText('Identity');
+    expect(elements[2]).toHaveText('Users');
   });
 });