'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 |
|---|
