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
metropolitan-bronze•2y 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.tsrare-sapphire•2y ago
Great, I appreciate the help!