☰

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

tag-icon • tag-icon javascript reactjs jestjs enzyme
反応アプリケーションをテストするために、酵素を使用して div 上のマウスオーバーイベントをシミュレートする方法は? 質問する

onMouseOver子 div をドロップダウンとして切り替えるdiv がありますonMouseLeave。Enazyne を使用してホバー イベントをテストします。

コンポーネントに関連するコードは次のとおりです。

<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。ブラウザーとブラウザーの要素タブにドロップダウンが表示されるので、コードは完全に機能しています。

さらに詳しい情報が必要な場合はお知らせください。ご協力いただければ幸いです。

ベストアンサー1

問題を正しく再現できた場合は、次のようになります。動作デモ、実行しようとしていたテスト ケースの。私は、enzyme と jest を使用していくつかのテスト ケースを作成しましたが、これがテストを実行する正しい方法だと思います。 :)

トグル

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

おすすめ記事