web-dev-qa-db-fra.com

Comment simuler un événement survolant une souris sur un div en utilisant une enzyme pour tester une application React?

J'ai un div qui onMouseOver et onMouseLeave bascule un div enfant comme une liste déroulante. Je veux tester l'événement de vol stationnaire en utilisant une enzyme.

Le code correspondant au composant est:

<div className="search-category" onMouseOver={() => toggleDropdown(true)} onMouseLeave={() => toggleDropdown(false)}>
    <div className="search-type">
        ...
    </div>
    {dropdownShown && <SearchMenu searchSections={searchSections} dispatch={dispatch} />}
</div>

Le code de test pertinent est

...
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 est le nom de classe du composant SearchMenu.

toggleDropdown est une fonction simple qui fait basculer le drapeau dropdownShown.

Le problème auquel je suis confronté est que même après avoir appelé .simulate, le expect sur la dernière ligne renvoie false quand il doit retourner true. Le code fonctionne parfaitement car je peux voir la liste déroulante sur le navigateur et dans l'onglet élément du navigateur.

Veuillez me faire savoir si d'autres détails sont nécessaires. Toute aide serait très appréciée.

javascriptreactjsjestjsenzyme
6
Deepank

Si j'ai correctement répliqué votre problème, voici la démo de travail , des cas de test que vous tentiez d'exécuter. J'ai écrit un certain nombre de cas de test en utilisant des enzymes et des plaisanteries, et je pense que c'est la bonne façon de faire les tests. :)

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

Chasing Unicorn's answer ci-dessus est presque parfait. Au lieu de passer mouseover à wrapper.simulate, ce devrait être mouseenter.

Cela a fonctionné pour moi:

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

C'est avec Enzyme v3.3.0 dans mon package.json

0
Pat Needham