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

IT技术 javascript reactjs jestjs enzyme
2021-05-21 13:35:51

我有一个 divonMouseOver并将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。代码运行良好，因为我可以在浏览器和浏览器的元素选项卡中看到下拉列表。

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

2个回答

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

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

上面追逐独角兽的答案几乎是完美的。而不是传递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

其它你可能感兴趣的问题
上一篇在特定屏幕上使用react导航修改后退按钮 下一篇每个 React 类方法的“缺少函数返回类型”