'Check if an element is present after state update - react testing library nextjs

I want to test one of my NextJS component which is a searchbar with a div that display only if the state "search" is not empty.

const SearchBar = () => {
    const [search, setSearch] = useState("");

    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
        startTransition(() => {
          setSearch(e.target.value);
        });
    };

    return (
    <>
        <input onChange={handleSearch} />
        {search.length > 0 && (
            <div>...</div> 
    </>);
}

I started to use react testing library today to test my project and my components. I had no problem until that question of testing if that div is displayed when the search state is not empty. I saw it's possible to test with the "Enzym" library but is there a way to test it properly with react testing library ?

Thanks !



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source