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

Question

我正在使用 Amplify UI Components for 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 东西确实在尝试连接，这不是单元测试的方式。

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

Answer 1

就像 Mike S. 正确指出的那样，模拟整个组件工作得很好：

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

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

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

How to prevent "‘amplify-authenticator’ is not a known element" error in unit tests when using Amplify UI Components

karma-jasmine

angular

aws-amplify