testing library jest - test style upon table cell click

user_916365 0
Viewed 1543

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.

testing-library react-testing-library jestjs reactjs unit-testing
2 Answers

Try adding the fire event inside the act

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

You need to add async for the await. you can add it after the test description

example:

test('when click on a recored', async() => {

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