测试react自定义钩子(react- Testing -library)

Question

我需要找到一种方法来测试这个自定义钩子。

1. 确保element.addEventListener正在被调用，transitionend和callback
2. 模拟transitionend事件，并确保element.removeEventListener,animationend和callback被调用

const useAnimation = ({ draggable, ifWaiting }) => {
const [ifAnimationAlive, setAnimation] = useState(true);
const element = draggable.current && draggable.current.resizableElement && draggable.current.resizableElement.current;
const callback = useCallback(() => {
setAnimation(false);
element.removeEventListener('animationend', callback);
}, [element]);
useEffect(() => {
if (element && ifWaiting && ifAnimationAlive) {
element.addEventListener('transitionend', callback);
}
}, [element, ifWaiting, ifAnimationAlive, callback]);
return ifAnimationAlive;
};

我已经设法找到了很多addEventListener的例子。但是它们都不适合我，因为他们用document测试了它，我想让它与特定的元素一起工作。

到目前为止，我已经设法做了这样的东西:

test('should call addEventListener', () => {
const ifWaiting = true;
const draggable = {
current: {
resizableElement: {
current: {
addEventListener: jest.fn()
}
}
}
}
renderHook(() => useAnimation, { initialProps: { draggable, ifWaiting }});
expect(draggable.current.resizableElement.current.addEventListener).toBeCalled()
})

我模拟了addEventListener和draggable元素，将ifWaiting传递为true，以便可以调用addEventListener。

但是test说函数没有被调用

Answer 1

renderHook在您的测试中被错误地使用，这意味着钩子从未被调用。

直接在回调函数内部调用钩子及其参数:

renderHook(() => useAnimation({ draggable, ifWaiting }));

或者使用钩子作为回调，并在选项中传递它的props:

renderHook(useAnimation, { initialProps: { draggable, ifWaiting } });