使用 Amplify UI 组件时如何防止单元测试中出现“‘amplify-authenticator’不是已知元素”错误

Question

我将Amplify UI Components 用于Angular V 10。在对我的应用程序进行单元测试时，我收到以下错误：

ERROR: ‘amplify-authenticator’ is not a known element

为了防止这个错误，我在组件的测试配置中导入了AmplifyUIAngularModule：

import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        AmplifyUIAngularModule
      ]
    })
})

这解决了第一个错误，但会触发另一个错误：

Error: Amplify has not been configured correctly.
The configuration object is missing required auth properties.
Did you run amplify push after adding auth via amplify add auth?
See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information

很明显，它告诉我 AmplifyUIAngularModule 不能在没有配置的情况下初始化。我尝试添加它，虽然感觉不对，因为组件不应该在单元测试中连接，而是被嘲笑：

Amplify.configure({
    Auth: {
      ....
    },
  });

这确实解决了错误，但是当 karma/jasmine 尝试连接到 headless chrome 进行测试时，会出现超时。我怀疑amplify 的东西确实在尝试连接，这不是单元测试的方式。

关于如何模拟 AWS/Amplify 调用的 SO 上有各种线程，但我找不到任何关于如何防止丢失 amplify-authenticator 依赖项的信息。

Answer 1

就像Mike S. 正确指出的那样，模拟整个组件就可以了：

@Component({
  selector: 'amplify-authenticator',
  template: '',
})
class AmplifyAuthenticatorMock {}

beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AmplifyAuthenticatorMock,
        AppComponent,
      ],
    }).compileComponents();
  });