Testing Ag-Grid React’s Custom Cell Renderer Component

  1. the test shows how to use the cell renderer in a TestComponent, which is sweet, one of the benefits of testing
  2. the test must use the async query findByText instead of getByText. findByText will continuously try to search for the DOM until it finds the element or timeout. getByText doesn’t work (button not found error) here because the way Ag-Grid renders its cell renderers.
  3. use userEvent to mimic the user’s click action, which emits a host of events, same as it happens when a user clicks the button in the browser.
  4. the action is a spy to get asserted because this is the expected behaviour of the sut. I did not directly assert the other expected behaviour, rendering the button with value as its text. But it is tested because the button is used to trigger the event in the test.
  5. no mocks. The test is rendering the AgGridReact component and the Button component from @mui/material.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store