react-sortable-hoc
react-sortable-hoc copied to clipboard
Unable to pass in Unit Test using Jest or React Testing Library
I am currently using react-testing library and jest for my unit test and unable to mock the move functionality. Below is what I've tried implementing but no luck. Everything passes in the test, but if I log the event in my component nothing logs when running my test and I am still getting lines uncovered in my report.
...
it('should sort links', async () => {
const mockFunction = jest.fn();
const modList = [
{
type: 'body',
id: 1,
title: 'One',
description: 'https://www.apple.com',
imageUrl: 'https://www.apple.com/logo.png',
},
{
type: 'body',
id: 2,
title: 'Two',
description: 'https://www.apple.com',
imageUrl: 'https://www.apple.com/logo.png',
},
];
const SortItem = () => <div>Item</div>;
const { container } = render(
<WidgetList list={modList}>
<SortItem onSortEnd={mockFunction} index={0} />
</WidgetList>,
);
const getTableCells = () => Array.from(container.querySelectorAll('.mywork-widget-drag-handler'));
const createBubbledEvent = (type, props = {}) => {
const event = new Event(type, { bubbles: true });
Object.assign(event, props);
return event;
};
const tableCells = getTableCells();
const startingNode = tableCells[0];
//const endingNode = tableCells[1];
startingNode.dispatchEvent(createBubbledEvent('mousedown', { left: 0, top: 0 }));
startingNode.dispatchEvent(createBubbledEvent('mousemove', { left: 0, top: '100px' }));
startingNode.dispatchEvent(createBubbledEvent('mouseup', { left: 0, top: '150px' }));
});
@jephjohnson did you find a solution?
@andersahp - I did not
I have the same problem. who know how to resolve? I test by react testing library.