Testing debounced function React - React-testing-library

I have the following component

import React, { useState, useEffect } from 'react';  import { FiSearch } from 'react-icons/fi';  import { useProducts } from '../../hooks';    export default function SearchBar() {    const [query, setQuery] = useState('');    const [debounced, setDebounced] = useState('');      useEffect(() => {      const timeout = setTimeout(() => {        setDebounced(query);      }, 300);      return () => {        clearTimeout(timeout);      };    }, [query]);      const handleChange = (e) => {      e.preventDefault();      setQuery(e.target.value);    };      useProducts(debounced);      return (      <div className="search-form">        <FiSearch className="search-form__icon" />        <input          type="text"          className="search-form__input"          placeholder="Search for brands or shoes..."          onChange={handleChange}          value={query}        />      </div>    );  }  

I want to test if useProducts(debounced); is actually called 300ms later after typing. I sadly have no Idea where to begin and was hoping someone could help.

https://stackoverflow.com/questions/65838387/testing-debounced-function-react-react-testing-library January 22, 2021 at 10:06AM