title: How to simulate mouse over event on a div using enzyme for testing a react application?
body: <p>I have a div that <code>onMouseOver</code> and <code>onMouseLeave</code> toggles a child div as a dropdown. I want to test the hover event using enzyme.</p>
  
  <p>The relevant code for the component is:</p>
  
  <pre><code>&lt;div className="search-category" onMouseOver={() =&gt; toggleDropdown(true)} onMouseLeave={() =&gt; toggleDropdown(false)}&gt;
      &lt;div className="search-type"&gt;
          ...
      &lt;/div&gt;
      {dropdownShown &amp;&amp; &lt;SearchMenu searchSections={searchSections} dispatch={dispatch} /&gt;}
  &lt;/div&gt;
  </code></pre>
  
  <p>The relevant test code is</p>
  
  <pre><code>...
  it('should toggle search type dropdown on mouse hover', () =&gt; {
      expect(enzymeWrapper.find('.SearchMenu').exists()).toEqual(false);
      enzymeWrapper.find('.search-category').simulate('mouseOver');
      expect(enzymeWrapper.find('.SearchMenu').exists()).toEqual(true);
  });
  ...
  </code></pre>
  
  <p><code>.SearchMenu</code> is the className of the <code>SearchMenu</code> component.</p>
  
  <p><code>toggleDropdown</code> is a simple function that toggles the <code>dropdownShown</code> flag.</p>
  
  <p>The issue i'm facing is that even after calling <code>.simulate</code>, the <code>expect</code> on the last line returns <code>false</code> when it should return <code>true</code>. The code is working perfectly as I can see the dropdown on the browser and in the element tab of the browser.</p>
  
  <p>Please let me know if any more details are required.
  Any help would be highly appreciated.</p>