react-draggable icon indicating copy to clipboard operation
react-draggable copied to clipboard

How to test react-draggable? Jest + Enzyme

Open Artimal opened this issue 7 years ago • 9 comments
trafficstars

Hello, How to test react-draggable? I try to do it by following code but it is not working (spy is not called):

describe('<MyComponent /> component:', () => {
    let wrapper;
	const props = {
		dragStart: jest.fn(),
		dragExit: jest.fn(),
		dragMove: jest.fn()
	};

	beforeEach(() => {
		wrapper = shallow(<MyComponent {...props}/>);
	});

	describe('Interaction:', () => {
		it('should call dragStart()', () => {
			wrapper.find('Dragabble').simulate('dragStart');
			expect(props.dragStart).toHaveBeenCalled(); // FAIL
		});
		it('should call dragExit()', () => {
			wrapper.find('div.bar').simulate('dragExit');
			expect(props.dragExit).toHaveBeenCalled(); // FAIL
		});
	});	
});

My draggable component looks like this:

<Draggable
onStart={this.props.dragStart.bind(this)}
onStop={this.props.dragExit.bind(this)}
onDrag={this.props.dragMove.bind(this)}>
(...)
</Draggable>

Artimal avatar Jan 11 '18 16:01 Artimal