How to simulate mouse over event on a div using enzyme for testing a react application?

Question

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.

Answer 1

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

import React from "react";

export const SearchMenu = () => <input />;

class Toggle extends React.Component {
  state = { dropdownShown: true };

  toggleDropdown = value => {
    this.setState({ dropdownShown: value });
  };
  render() {
    return (
      <div
        className="search-type"
        onMouseOver={() => this.toggleDropdown(true)}
        onMouseLeave={() => this.toggleDropdown(false)}
      >
        <h1>Hover over me to hide/unhide the input</h1>
        {this.state.dropdownShown && <SearchMenu />}
      </div>
    );
  }
}

export default Toggle;

Toggle.spec.js

import React from "react";
import { shallow } from "enzyme";
import Toggle from "./Toggle";
import Enzyme from "enzyme";
import { SearchMenu } from "./Toggle";

describe("Toggle Component", () => {
  it("check state", () => {
    const wrapper = shallow(<Toggle />);
    expect(wrapper.find(<SearchMenu />).exists).toBeTruthy();

    // Testing Initial State
    expect(wrapper.state("dropdownShown")).toBe(true);
    wrapper.simulate("mouseleave");

    // Testing state after mouseleave
    expect(wrapper.state("dropdownShown")).toBe(false);

    // Testing state after mouseover
    wrapper.simulate("mouseover");
    expect(wrapper.state("dropdownShown")).toBe(true);
  });
});

Answer 2

Chasing Unicorn's answer above is almost perfect. Instead of passing mouseover to wrapper.simulate, it should be mouseenter.

This worked for me:

  it('sets hoveredOver state to true/fase from mouseenter and mouseleave events', () => {
    const wrapper = shallow(<MyComponent {...defaultProps} />);

    // initial state:
    expect(wrapper.state('hoveredOver')).toBe(false);

    wrapper.simulate('mouseenter');
    expect(wrapper.state('hoveredOver')).toBe(true);

    wrapper.simulate('mouseleave');
    expect(wrapper.state('hoveredOver')).toBe(false);
  });

This is with Enzyme v3.3.0 in my package.json