optimistic-gold
optimistic-gold17mo ago

Testing Table Component

Hi everyone - I feel like I've scrubbed the internet to figure out this issues; apologies if this is the incorrect place to ask this. I'm looking to test the output of <Table /> onChange, in which the user updates page size or page number. Using react query library, I don't know how to (1) query the table component, and (2) fire these event. Here is the table - return ( <Table columns={columns} rowKey='id' dataSource={userList} pagination={{ pageSize: pageSize, current: pageNumber, total: totalUsers, showSizeChanger: true, pageSizeOptions: ['5','10','20','50'] }} onChange={handleTableChange} loading={tableResult.tableQueryResult?.isLoading} bordered > </Table> ) Table is imported using @pankod/refine-antd Here is a test - it('it shows empty table when provided no users', () => { (useTableCustom as jest.Mock).mockReturnValue(emptyUserList); const { queryByTestId } = customRender( <SearchResult /> ); // how to access Table component & fire events? });
2 Replies
eager-peach
eager-peach17mo ago
I think you can use debug command from the response of customRender function to see what's rendered and use the selector functions to grab the items you want, such as observing the table output and selecting/firing event on pagination buttons etc. Maybe you can check our useTable tests for @pankod/refine-antd might help you in your case 🤔 https://github.com/refinedev/refine/blob/next/packages/antd/src/hooks/table/useTable/useTable.spec.ts
optimistic-gold
optimistic-gold17mo ago
Great, I appreciate the help!