使用Testing Library与MockBuilder时，如何渲染<ng-container *ngTemplateOutlet>？

可能原因及解决方案 #

1. 检查条件渲染控制 #

• 确认<ng-container *ngTemplateOutlet="previewContent" />是否被*ngIf等指令控制显示状态。如果有，测试时需在inputs中传入对应参数，让容器处于可见状态。
  • 示例：若组件有@Input() isPreviewEnabled = false;，则测试时要传{ isPreviewEnabled: true }。

2. 修正MockBuilder配置 #

• 使用MockBuilder时，默认会模拟组件依赖，但如果要保留组件自身的模板逻辑，需明确关联其所属模块，或显式保留组件声明：

// 方法1：关联组件所属模块
function setupBuilder() {
  return MockBuilder(SomeComponent, SomeComponentModule);
}

// 方法2：显式保留组件，避免被模拟
function setupBuilder() {
  return MockBuilder(SomeComponent).keep(SomeComponent);
}

3. 优化render函数的参数传递 #

• 确保MockBuilder的构建结果正确传入render，也可以直接在setup中先执行MockBuilder再调用render：

async function setup(inputs: {
  // inputs...
}) {
  await MockBuilder(SomeComponent, SomeComponentModule);
  const utils = await render(SomeComponent, { inputs });
  const user = userEvent.setup();

  utils.debug();
  return { ...utils, user, component: utils.fixture.componentInstance };
}

4. 手动触发变更检测 #

• 模板渲染可能需要手动触发变更检测，可在setup或测试用例中添加：

// 在setup中添加
utils.fixture.detectChanges();

// 或在测试用例中调用
it('should render', async () => {
  const { component, fixture } = await setup({ ... });
  fixture.detectChanges();
  expect(component).toBeDefined();
  expect(screen.getByTestId('test-text')).toBeInTheDocument();
});

内容的提问来源于stack exchange，提问作者Peter T.