The fireEvent.click() from @testing-library/angular not working for 'ion-button' component but works for normal button

Question

I am developing an application with Ionic Angular. While I am testing with @testing-library/angular, the test is not working for ion-button but works for normal button field. What could be the problem?

fireEvent.click() event is not working for the code below (ionic angular):

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

And fireEvent.click() event works with the following code:

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

The code I am using for testing is below:

 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); });

And the Version I am using:

 "@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

I'm not sure how ionic works, but it might be that they're not listening on the native click event. Try using user-event instead of fireEvent. This represents a "real" user, and doesn't only fire a click event, but fires more events.

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