在 Angular 单元测试中，我如何模拟整个组件，而不仅仅是一个类？答案

【问题标题】：In an Angular Unit Test, how can I mock an entire component, instead of just a class?在 Angular 单元测试中，我如何模拟整个组件，而不仅仅是一个类？
【发布时间】：2020-04-24 04:35:33
【问题描述】：

我正在尝试对使用子组件的组件进行单元测试。我需要模拟子组件，因为子组件使用 CanvasJS 来显示绘图，这与 Jest 单元测试不兼容。

现在，它正在我的规范文件中使用，如下所示：

import { SubComponent } from '../shared/components/sub/sub.component';
import { SubComponentMock } from '../shared/mocks/component/SubComponentMocks';
...

  const createComponent = createComponentFactory({
    component: PageComponent,
    declarations: [ViewComponent],
    imports: [],
    providers: [
      { provide: SubComponent, useClass: SubComponentMock },
    ],
  });

  beforeEach(() => {
    jest.restoreAllMocks();
    spectator = createComponent();
  });

  it('should create', () => {
    expect(spectator.component).toBeTruthy();
  });

我的 SubComponentMocks 文件包含一个类 SubComponentMock，它具有 SubComponent 中的函数。我收到以下错误：

Cannot find module 'canvasjs' from 'sub.component.ts'

不应该模拟导致测试根本不尝试找到该模块吗？它不应该在 sub.component.ts 中做任何事情，它应该只访问 SubComponentMocks。有没有办法模拟整个组件，这样测试就不会尝试找到 canvasjs 模块？

【问题讨论】：

标签： angular typescript unit-testing mocking jestjs

【解决方案1】：

像这样在您的规范中添加模拟子组件：-

 @Component({
    selector:'sub'
    })
    class MockComponent{
    mockProperty <----- which being used
    }

并在创建组件中执行此操作：-

const createComponent = createComponentFactory({
    component: PageComponent,
    declarations: [ViewComponent,MockComponent],
    imports: [],
    providers: [],
  });

【讨论】：

“mockProperty”会发生什么？这只是一个空班吗？
不，如果您的组件有任何可能是嵌套子组件的值的属性，我指出了模拟属性，否则您不需要提及任何属性。它应该可以正常工作。
@Matt123 让我知道此解决方案是否适合您。
这对我不起作用，我仍然有同样的错误。要么我不知道我在做什么，要么 canvasjs 只是让单元测试变得不可能。 @Aditya

【解决方案2】：

我熟悉 Karma 和 Jasmine，但我认为 Jest 在这方面表现相同。

在您的用例中，我会利用NO_ERRORS_SCHEMA。这基本上告诉 Angular，如果您在 HTML 中看到您不认识的元素，请不要担心。

import { NO_ERRORS_SCHEMA } from '@angular/core';
......
const createComponent = createComponentFactory({
    component: PageComponent,
    declarations: [ViewComponent],
    imports: [],
    schemas: [NO_ERRORS_SCHEMA],
  });

您现在模拟组件的方式就是模拟服务的方式。

此外，Aditya 的方式也可能有效，但我发现 NO_ERRORS_SCHEMA 更好（如果您不关心单元测试中的子组件，则工作量更少）。

另外，请查看 overrideComponent 和 overrideModule，但这可能只有在您使用 Angular 的方法进行测试时。

===== 编辑 ==========

没关系，您似乎在使用ngneat 进行测试。我会利用componentMocks 属性，而不是schema。

【讨论】：