如何使用酶在div上模拟鼠标悬停事件以测试反应应用程序？

Question

我有一个div，onMouseOver并将onMouseLeave子div切换为下拉菜单。我想使用酶测试悬停事件。

该组件的相关代码为：

<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组件的className 。

toggleDropdown是切换dropdownShown标志的简单功能。

我面临的问题是，即使在调用后.simulate，expect最后一行的返回值false仍该返回true。我可以在浏览器和浏览器的“元素”选项卡中看到下拉列表，因此代码运行良好。

请让我知道是否需要更多详细信息。任何帮助将不胜感激。

Answer 1

如果我正确地复制了您的问题，那么这是您尝试运行的测试用例的有效演示。我已经使用酶和玩笑编写了许多测试用例，我认为这是进行测试的正确方法。:)

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

上面追逐独角兽的答案几乎是完美的。而不是传递mouseover给 wrapper.simulate，它应该是mouseenter.

这对我有用：

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

这是我的 Enzyme v3.3.0 package.json