testing library jest - test style upon table cell click

Question

I have an html table which has onclick handlers for each cell (td), so that when it clicks the cell, it changes it's background color.

const handleRowCellClick = jest.fn()

const tableRows = container.querySelectorAll<HTMLElement>('table tbody tr')
expect(tableRows[0]).toHaveStyle('background-color: rgb(255, 255, 255)')

// click data cell
fireEvent.click(within(tableRows[0]).getByRole('cell'))
expect(handleRowCellClick).toHaveBeenCalled()

// expect background to change to selected colour
  await waitFor(() => {
    expect(within(tableRows[0]).getByRole('cell')).toHaveStyle(
     'background-color: rgb(229, 255, 255)',
   )
  })

the functionality works as expected but the unit tests, last expectation is failing to detect the colour change, after a cell click.

what is the best way to test this change of styles? FYI I have used the expectation with and without await waitFor(() but both failed to detect the change.

Answer 1

Try adding the fire event inside the act

act(() => {
  fireEvent.click(screen.getByTestId("AddIcon"));
});