使用 jest-mock-extended 和 Spectator 进行 angular 组件测试
Use jest-mock-extended and Spectator for angular components testing
我已经成功地使用 jest-mock-extended 来测试服务,它对我来说很好用。它简单易用且输入安全。
现在我必须测试 Angular 个组件。为此,我找到了 Spectator。我设法使用 SpectatorHost
功能为没有服务的简单组件编写测试。现在我必须用我应该模拟的服务来测试一个组件,但我真的很难做到。
出于这个原因,我想知道是否有一种方法可以将使用 jest-mock-extended
创建的模拟注入到使用 SpectatorHost
内部生成的组件中。
这样我也可以使用同一个库来模拟我项目中的服务。
我找到了如何整合这两个库:
describe('MyComponent', () => {
// SpectatorHost object and factory
let host: SpectatorHost<MyComponent>;
const createHost = createHostFactory({
component: MyComponent,
mocks: [MyService], // Automatically mock service used by the component
});
// MockProxy object from jest-mock-extended
let myServiceMock: MockProxy<MyService>;
// Init and reset service before each test
beforeEach(() => {
myServiceMock = mock<MyService>();
mockReset(MyService);
});
it('...', () => {
// Mock whatever function in the service
myServiceMock.doSomething.mockReturnValue('Mock');
host = createHost('<my-component></my-component>', {
providers: [{ provide: MyService, useValue: myServiceMock }] // Pass mocked service to the component
});
// Rest of the test...
});
我已经成功地使用 jest-mock-extended 来测试服务,它对我来说很好用。它简单易用且输入安全。
现在我必须测试 Angular 个组件。为此,我找到了 Spectator。我设法使用 SpectatorHost
功能为没有服务的简单组件编写测试。现在我必须用我应该模拟的服务来测试一个组件,但我真的很难做到。
出于这个原因,我想知道是否有一种方法可以将使用 jest-mock-extended
创建的模拟注入到使用 SpectatorHost
内部生成的组件中。
这样我也可以使用同一个库来模拟我项目中的服务。
我找到了如何整合这两个库:
describe('MyComponent', () => {
// SpectatorHost object and factory
let host: SpectatorHost<MyComponent>;
const createHost = createHostFactory({
component: MyComponent,
mocks: [MyService], // Automatically mock service used by the component
});
// MockProxy object from jest-mock-extended
let myServiceMock: MockProxy<MyService>;
// Init and reset service before each test
beforeEach(() => {
myServiceMock = mock<MyService>();
mockReset(MyService);
});
it('...', () => {
// Mock whatever function in the service
myServiceMock.doSomething.mockReturnValue('Mock');
host = createHost('<my-component></my-component>', {
providers: [{ provide: MyService, useValue: myServiceMock }] // Pass mocked service to the component
});
// Rest of the test...
});