Testing Ag-Grid React’s Custom Cell Renderer Component

Testing (Series)
Understanding Unit Test From The Best Book On The Topic
Testing Ag-Grid React’s Custom Cell Renderer Component
Testing ErrorFallback Component
Testing useDebouncedValue Hook
Testing a HTTP Client Adaptor Hook useClient
Testing a HTTP Error Handler Utility Hook
Testing a Generic Fetch Item List hook with Mock Service
Introducing @mockapi/msw, mock an API server for your entities without writing any code with Mock Service Worker
Testing a Generic Save Item Hook with MSW and @mockapi/msw
Testing a Text Field component integrating Mui’s Text Field with React Hook Form

I am on a journey to gain the skills for testing software. I will document the techniques and tricks I learned via blog posts.

My first post on testing explains what is a unit test and what makes a test good, the knowledge I gained from reading UNIT TESTING: PRINCIPLES, PRACTICES, AND PATTERNS by Vladimir Khorikov.

Subject under test(sut): a generic cell renderer component for Ag-Grid React renders any component of type FC<ICellRendererParams>.

The component being rendered is a small button that uses formatted cell value or cell value as its text. When the user clicks the button, it calls the specified action.

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.

Side note: the beauty about React is that it embraces functional programming. Its building block is function and encourages the use of pure function. So we can compose simple and pure functions together to make powerful yet simple, elegant and easy to test components.

In this instance, I used a generic cell renderer component to bridge between Ag-Grid’s API and my button component. The useSmallButton hook takes an function and returns a component that uses input. With this generic cell renderer component, I can render anything in a cell. I think Ag-Grid could implement such a generic component to make its API easier to use if not already.

My favourite feature of JavaScript is the spread/rest operator. With this operator, the props of a functional React component is like a contract, an interface, really elegant and powerful.