'RTL not recognizing button as DOM element

I am testing a simple button using React Testing Library, however, i get the below error:

Unable to fire a "click" event - please provide a DOM element.

Please see my button below:

<div>
  <p className='mb-3 desktop:mb-5 mt-6 font-sans font-normal text-slate-400'>
    Installation is already Included.
  </p>
  <div className='text-15 text-black font-semibold inline-flex'>
    <button
      type='button'
      className='inline text-15 underline text-brand-blue-500 hover:text-brand-blue-600 
        font-semibold transition-all'
      onClick={handleTermsLinkClick}
      data-testid={dataTestIds.INSTALLATION_REQUIREMENTS_LINK}
    >
      {' '}
      Read the installation requirements
    </button>
  </div>
</div>

And below is my test:

import { DateTimeSelector } from '@app/components/features/CustomerPortal/Scheduler/DateTimeSelector';
import { InstallationRequirementsModal } from '@app/components/features/CustomerPortal/Scheduler/DateTimeSelector/InstallationRequirementsModal';
import { INSTALLATION_REQUIREMENTS_MOCK } from '@app/__mocks__/checkout';
import { MY_PRODUCTS_MOCK } from '@app/__mocks__/my-account/myProducts';
import { constants, dataTestIds } from '@app/utils/constants';
import { renderWithProvider } from '@app/utils/tests-utils';
import { screen, fireEvent } from '@testing-library/react';

const mockAddress: string = 'Test Address street';

describe('CustomerPortal DateTimeSelector', () => {

  it('should render correctly', async () => {

    renderWithProvider(
      <>
        <div id={constants.MODAL_PORTAL_ID} />
        <DateTimeSelector
          handleCloseModalClick={() => {}}
          isAppointmentScheduled
          isMaintenance={false}
          subscriptionSlide={MY_PRODUCTS_MOCK[0].slides[0]}
          subscriptionAddressFormatted={mockAddress}
        />
      </>
    );

    const openTermsModalLink = screen.queryByTestId(
      dataTestIds.INSTALLATION_REQUIREMENTS_LINK
    );

    fireEvent.click(openTermsModalLink);
  });
});

The dataTestId is being found correctly, but for some reason it does not recognize the <button> as a DOM Element.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source