PrimeReact Unit Test Issues

UI Components for React
Post Reply
Posts: 1
Joined: 09 Jan 2023, 19:14

02 Feb 2023, 00:47

We're in the process of integrating PrimeReact into our application and are running into a few issues with our unit tests using react-testing-library and jest.

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 () => {

    const ToggleButton = screen.getByTestId('toggleButton')

    console.log('before', prettyDOM(ToggleButton))
    console.log('after', prettyDOM(ToggleButton))

The outcome of this test is:

Code: Select all

Expected element to have text content:
Likewise, the output of the `console.log` statements shows the "before" and "after" instances to be the exact same. No text change, no aria-pressed change, etc.

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!


Posts: 3539
Joined: 22 Apr 2013, 15:48

06 Feb 2023, 19:38

Here is my test for PrimeReact button. Make sure you are getting the "clickable" value element and not just clicking on the ToggleButton itself.

Code: Select all

test('when button is clicked ensure onClick is fired', async () => {
        // Arrange
        const clickOn = jest.fn();
        const { container } = render(<Button onClick={clickOn} />);
        const button = container.getElementsByClassName('p-button')[0];

        // Act

        // Assert
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile:
PrimeFaces Elite 12.0.0 / PF Extensions 12.0.3
PrimeReact 8.7.3

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests