[英]Mock MsalService in Angular Jest
I have a Test in Angular that looks like this.我在 Angular 中有一个看起来像这样的测试。 But it always fails because I cannot mock the MsalService correctly.
但它总是失败,因为我无法正确模拟 MsalService。
export class MockedMsalService extends MsalService {}
describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [NavbarComponent],
imports: [
],
providers: [
{ provide: MsalService, useClass: MockedMsalService },
{ provide: Router, useClass: RouterMock },
{ provide: UsersService, useClass: UsersServiceMock },
],
schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
When I try to run the test I get the error: NullInjectorError: R3InjectorError(DynamicTestModule)[MsalService -> InjectionToken MSAL_INSTANCE -> InjectionToken MSAL_INSTANCE]: NullInjectorError: No provider for InjectionToken MSAL_INSTANCE!当我尝试运行测试时出现错误: NullInjectorError: R3InjectorError(DynamicTestModule)[MsalService -> InjectionToken MSAL_INSTANCE -> InjectionToken MSAL_INSTANCE]: NullInjectorError: No provider for InjectionToken MSAL_INSTANCE!
I would be very grateful if someone could help me further如果有人能进一步帮助我,我将不胜感激
The right answer is in the comment: MockedMsalService extends MsalService
doesn't mock MsalService
.正确答案在评论中:
MockedMsalService extends MsalService
doesn't mock MsalService
。
To avoid dependency hassle, the best way is to use a mocking library, for example ng-mocks
.为避免依赖问题,最好的方法是使用 mocking 库,例如
ng-mocks
。
In this case, your test can look like:在这种情况下,您的测试可能如下所示:
describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
// NavbarComponent stays as it is
// All dependencies in NavbarModule will be mocks
beforeEach(() => MockBuilder(NavbarComponent, NavbarModule));
beforeEach(() => {
fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
And to customize mocks, you can use MockInstance
or MockBuilder.mock()
.要自定义模拟,您可以使用
MockInstance
或MockBuilder.mock()
。
You can provide all factories wich were declared into your app.module.ts您可以提供在您的 app.module.ts 中声明的所有工厂
import {
MsalGuard,
MsalService,
MSAL_GUARD_CONFIG,
MSAL_INSTANCE,
} from '@azure/msal-angular';
describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [NavbarComponent],
imports: [
],
providers: [
{ provide: MsalService, useClass: MockedMsalService },
{ provide: Router, useClass: RouterMock },
{ provide: UsersService, useClass: UsersServiceMock },
{
provide: MSAL_INSTANCE,
useFactory: MSALFactory, // your app.module.ts factory
},
{
provide: MSAL_GUARD_CONFIG,
useFactory: MSALGuardConfigFactory, // your app.module.ts guard factory
},
MsalService,
MsalGuard,
],
schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.