javascript - 如何使用 enzyme 模拟 div 上的鼠标悬停事件以测试 react 应用程序？

Question

我有一个 div，onMouseOver 和 onMouseLeave 将子 div 切换为下拉列表。我想使用 enzyme 测试悬停事件。

该组件的相关代码为:

<div className="search-category" onMouseOver={() => toggleDropdown(true)} onMouseLeave={() => toggleDropdown(false)}>
    <div className="search-type">
        ...
    </div>
    {dropdownShown && <SearchMenu searchSections={searchSections} dispatch={dispatch} />}
</div>

相关测试代码为

...
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 是 SearchMenu 组件的类名。

toggleDropdown 是一个简单的函数，用于切换 dropdownShown 标志。

我面临的问题是，即使在调用 .simulate 之后，最后一行的 expect 在应该返回时返回 false 真。代码运行完美，因为我可以在浏览器和浏览器的元素选项卡中看到下拉菜单。

如果需要更多详细信息，请告诉我。任何帮助将不胜感激。

Answer 1

如果我正确地复制了你的问题，这里是 working demo ，您尝试运行的测试用例。我已经使用 enzyme 和 jest 编写了许多测试用例，我认为这是进行测试的正确方法。 :)

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);
  });
});