For example, I am trying to write a test to replicate a user clicking a ToggleButton.
We are normally wrapping the PrimeReact components in our own, but for the purposes of this post and to remove any possible fault on our side, I'm directly importing the PrimeReact component
Code: Select all
import { render, screen, prettyDOM } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import '@testing-library/jest-dom'
import { ToggleButton, ToggleButtonProps } from 'primereact/togglebutton'
describe('ToggleButton', () => {
const setup = (props?: ToggleButtonProps) => {
render(<ToggleButton data-testid="toggleButton" {...props} />)
}
it('clicks ToggleButton', async () => {
setup()
const ToggleButton = screen.getByTestId('toggleButton')
console.log('before', prettyDOM(ToggleButton))
await userEvent.click(ToggleButton)
console.log('after', prettyDOM(ToggleButton))
expect(ToggleButton).toHaveTextContent('Yes')
})
})
Code: Select all
Expected element to have text content:
Yes
Received:
No
Why is the userEvent click not triggering the click event on the PrimeReact ToggleButton component?
Can PrimeReact components not be tested in this way?
I've tried this same test approach with a standard HTML button and it works as expected.
Any help would be greatly appreciated!
Cheers,
-Chris