lundi 2 novembre 2020

Testing mouse event listener added using ref in React functional component

Hi I have a functional component as shown below:

import React, { useRef, useEffect, useState } from 'react';

const SomeComponent = ({ prop1, ...otherProps}) => {
  const divRef = useRef();

  useEffect(() => {
    divRef.current.addEventListener('mousedown', mouseDownFunc);
  }, []);

  const mouseDownFunc = () => {
    document.addEventListener('mousemove', (el) => {
        // call some parent function
    });
  }

  return (
    <div
        className='test-div'
        ref={ divRef }>
    </div>
  );
};

How do I test a react functional component wherein addEventListener is added using ref inside useEffect which when triggered calls mouseDownFunc. I'm new to react jest testing, little confused on how to do it.

Aucun commentaire:

Enregistrer un commentaire