I have a div that onMouseOver
and onMouseLeave
toggles a child div as a dropdown. I want to test the hover event using enzyme.
The relevant code for the component is:
<div className="search-category" onMouseOver={() => toggleDropdown(true)} onMouseLeave={() => toggleDropdown(false)}>
<div className="search-type">
...
</div>
{dropdownShown && <SearchMenu searchSections={searchSections} dispatch={dispatch} />}
</div>
The relevant test code is
...
it('should toggle search type dropdown on mouse hover', () => {
expect(enzymeWrapper.find('.SearchMenu').exists()).toEqual(false);
enzymeWrapper.find('.search-category').simulate('mouseOver');
expect(enzymeWrapper.find('.SearchMenu').exists()).toEqual(true);
});
...
.SearchMenu
is the className of the SearchMenu
component.
toggleDropdown
is a simple function that toggles the dropdownShown
flag.
The issue i'm facing is that even after calling .simulate
, the expect
on the last line returns false
when it should return true
. The code is working perfectly as I can see the dropdown on the browser and in the element tab of the browser.
Please let me know if any more details are required. Any help would be highly appreciated.
Chasing Unicorn's answer above is almost perfect. Instead of passing
mouseover
to wrapper.simulate, it should bemouseenter
.This worked for me:
This is with Enzyme v3.3.0 in my
package.json
If I have replicated your issue correctly, here is the working demo, of the test cases you were trying to run. I have written a number of test cases using enzyme and jest, and I think this is the right way to do the testing. :)
Toggle.js
Toggle.spec.js