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

Question

我有一个onMouseOver的div，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组件的类名。

toggleDropdown 是切换dropdownShown标志的简单函数。

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

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

Answer 1

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

切换.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;

切换规格.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);
  });

这是我package.json中的酶v3.3.0