如何在使用 Amplify UI 组件时防止单元测试中出现"‘amplify-authenticator’ is not a known element"错误

Question

我正在使用Angular V 10的Amplify UI组件。当单元测试我的应用程序时，我收到以下错误：

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试图连接到无头chrome进行测试时，会出现超时。我怀疑放大的东西确实在试图连接，这不可能是单元测试的方式。

SO上有各种关于如何模拟AWS/Amplify调用的线程，但我找不到任何关于如何防止丢失的放大验证器依赖性的信息。

Answer 1

正如Mike S.正确指出的那样，嘲笑整个组件工作得很好：

@Component({
selector: 'amplify-authenticator',
template: '',
})
class AmplifyAuthenticatorMock {}
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [
AmplifyAuthenticatorMock,
AppComponent,
],
}).compileComponents();
});