使用jest mock extended和Spectator进行角度组件测试

Question

我已经成功地使用了jest-mock扩展来测试服务，它对我来说很好用。它简单、易用且类型安全。

现在我必须测试Angular组件。为此，我找到了《旁观者》。我设法使用SpectatorHost特性为没有服务的简单组件编写了测试。现在我必须用一个我应该模仿的服务来测试一个组件，但我真的很难做到

出于这个原因，我想知道是否有一种方法可以将用jest-mock-extended创建的mock注入到用SpectatorHost内部生成的组件中。

通过这种方式，我还将使用相同的库来模拟我的项目中的服务。

Answer 1

我发现了如何集成两个库：

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...         
});