来自 @testing-library/angular 的 fireEvent.click() 不适用于"离子按钮"组件，但适用于普通按钮

Question

我正在用Ionic Angular开发一个应用程序。当我使用@testinglibrary/angular进行测试时，该测试不适用于离子按钮，但适用于正常的

按钮fireEvent.click((事件不适用于以下代码(离子角度(：

<ion-button data-testid="button-submit" class="login-submit-btt" type="submit" size="large">Test</ion-button>

fireEvent.click((事件使用以下代码：

<button data-testid="button-submit" class="login-submit-btt" type="submit" size="large">Test</button>

我用于测试的代码如下：

import {
LoginFormData,
LoginFormPresentationComponent,
} from './login-form.component';
import { fireEvent, render, screen } from '@testing-library/angular';
import { ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
test('Login button should not be disabled', async () => {
const loginData: LoginFormData = {
login: 'dev',
password: 'dev',
stayLoggedIn: false,
};
await render(LoginFormPresentationComponent, {
componentProperties: {
loginData: loginData,
commitChanges: {
// because the output is an `EventEmitter` we must mock `emit`
// the component uses `output.emit` to interact with the parent component
emit: submitAction,
} as any,
},
imports: [ReactiveFormsModule, IonicModule], 
});
fireEvent.click(screen.getByTestId('button-submit'));
expect(submitAction).toHaveBeenCalledWith(loginData);
});

我使用的版本：

"@angular/cli": "~14.1.1",
.....
"@testing-library/angular": "12.1.2",
"@testing-library/dom": "^8.17.1",
"@testing-library/user-event": "^14.4.3",
"@ionic/angular": "6.2.5",
"@ionic/core": "6.2.5",
.....

Answer 1

我不确定ionic是如何工作的，但可能是他们没有监听本地点击事件。请尝试使用用户事件而不是fireEvent。这表示"；真实的"；用户，并且不仅触发点击事件，还触发更多事件。

https://testing-library.com/docs/user-event/intro