如何在赛普拉斯组件测试运行器中安装 Angular 组件答案

【问题标题】：How can I mount Angular Component in Cypress Component Test Runner如何在赛普拉斯组件测试运行器中安装 Angular 组件
【发布时间】：2021-04-08 11:56:36
【问题描述】：

我尝试在 Angular 中新设置的 Cypress 组件测试运行环境中安装 Angular 组件，如下所示：

import { ɵrenderComponent as renderComponent, ɵcompileComponent as compileComponent} from '@angular/core';
import '@angular/compiler';
import 'zone.js';
import { UT1DashEmployeesComponent } from './ut1-dash-employees.component';

/* eslint-env mocha */
/* global cy */
describe('UT1DashEmployeesComponent', () => {
  beforeEach(() => {
    const html = `
      <head>
        <meta charset="UTF-8">
      </head>
      <body>
        <app-ut1-dash-employees></app-ut1-dash-employees>
      </body>
    `;
    const document = (cy as any).state('document');
    document.write(html);
    document.close();

    // Quick hack to get the component definition, which in our case is the first annotation.
    compileComponent(UT1DashEmployeesComponent, (<any>UT1DashEmployeesComponent).__annotations__[0]);
    renderComponent(UT1DashEmployeesComponent, {
      host: document.body
    });
  });

  it('works', () => {
    cy.contains('UT1DashEmployeesComponent!').should('be.visible');
  });

  it('works again', () => {
    cy.contains('UT1DashEmployeesComponent').should('be.visible');
  });

});

但我收到以下错误：

错误组件“UT1DashEmployeesComponent”未解析：

templateUrl: ./ut1-dash-employees.component.pug
styleUrls: ["./ut1-dash-employees.component.styl"] 您是否运行并等待“resolveComponentResources()”？

因为这个错误发生在每个钩子之前，我们跳过了当前套件中的剩余测试：UT1DashEmployeesComponent

我能做什么？

【问题讨论】：

标签： angular cypress

【解决方案1】：

赛普拉斯还没有对 Angular 组件的原生支持。有一些第三方插件正在合并到产品中（我认为）。

【讨论】：