web-dev-qa-db-ja.com

反応アプリケーションをテストするために酵素を使用してdivのマウスオーバーイベントをシミュレートする方法は？

onMouseOverとonMouseLeaveが子divをドロップダウンとして切り替える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を返します。ブラウザーとブラウザーの要素タブにドロップダウンが表示されているため、コードは完全に機能しています。

詳細が必要な場合はお知らせください。どんな助けも大歓迎です。

javascriptreactjsjestjsenzyme
6
Deepank

問題を正しく再現した場合、実行しようとしていたテストケースの working demo があります。酵素と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);
  });
});
5
Chasing Unicorn

上記のUnicornの答えを追うことはほぼ完璧です。 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

0
Pat Needham