如何使用酶在div上模拟鼠标悬停事件以测试反应应用程序？ [英] How to simulate mouse over event on a div using enzyme for testing a react application?

问题描述

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

I have a div that onMouseOver and onMouseLeave toggles a child div as a dropdown. I want to test the hover event using 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 组件的className。

.SearchMenu is the className of the SearchMenu component.

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

toggleDropdown is a simple function that toggles the dropdownShown flag.

我面临的问题是即使调用 .simulate ，最后一行的期望返回 false 什么时候应该返回 true 。该代码运行正常，因为我可以在浏览器和浏览器的元素选项卡中看到下拉列表。

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.

推荐答案

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

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

这篇关于如何使用酶在div上模拟鼠标悬停事件以测试反应应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！