La simulation, cliquez sur le document ReactJS/JSDom

Donc je suis en train d'écrire certains tests de code qui ajoute un événement de clic sur le document. Je suis à l'aide de JSDom, ReactJS, et de Moka/Chai de l'installation. J'ai essayé le code suivant dans un test:

document.addEventListener('click', function() {
  console.log('test');
});
React.addons.TestUtils.Simulate.click(document);
//also tried React.addons.TestUtils.Simulate.click(document.body);

toutefois, ce code ne produit pas l'écho que j'attends.

Est-il un moyen de simuler le clic, keyup, etc... sur le document avec JSDom et ReactJS?

Mise à JOUR

À Nick réponses, j'ai essayé d'ajouter ce code à l'épreuve:

document.body.addEventListener('click', function() {
  console.log('test');
});

document.body.click();

et je n'ai jusqu'à ne recevez pas le journal de la console de sortie. Je ne suis pas sûr si il ya un problème avec JSDom et de faire ce type de chose.

Si je ne peux pas l'unité de tester ce code, c'est très bien, il y a déjà un peu de code que je ne peux pas l'unité de test à l'heure actuelle (code qui nécessite une réelle DOM pour être en mesure d'obtenir les largeurs, hauteurs, etc...), mais je voudrais être en mesure de l'unité de test plus du code (et je ne suis pas intéressé à l'aide de PhantomJS pour les tests unitaires). Mes tests d'intégration permettra de couvrir ce type de code.

UPDATE2

Une autre chose à noter est que est que quand je console.log(document); je vois objet attaché à la _listeners propriété pour click donc je sais que l'événement est attachée, il a juste ne semble pas être en cours d'exécution.

  • Avez-vous essayé la même chose dans un navigateur? Fait-il?
  • Oui, le code dans le navigateur fonctionne très bien
InformationsquelleAutor ryanzec | 2014-12-18
  1. 27

    Mise à jour: document.body.click fonctionne dans un navigateur, mais pour jsdom vous devez créer manuellement l'événement: 

    document.body.addEventListener('click', function() {
  console.log('test');
});

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, true);
document.body.dispatchEvent(evt)

    Le code ci-dessus fonctionne pour moi dans la Plaisanterie et devrait travailler avec "en solo" jsdom ainsi.

    L'automne 2018 vacances de mise à jour

    Les outils autour de la simulation d'événements ont eu beaucoup mieux. Je suis actuellement à changer mon approche à utiliser l'excellent réagir le test de la bibliothèque pour rendre mes composants et de l'expédition des événements:

    import {render, fireEvent} from 'react-testing-library'

test('example', () => {
  const handleClick = jest.fn()

  const {getByText} = render(<div><button onClick={handleClick}>Click Me</button></div>)
  fireEvent.click(getByText('Click Me'))

  expect(handleClick).toHaveBeenCalled()
})

    Alors que je crois encore à la fin à la fin des tests avec quelque chose comme marionnettiste ou le sélénium (ou de cyprès!) de fournir le plus haut niveau de confiance que quelque chose fonctionne réellement, cela fournit une énorme quantité de valeur sans polluer les tests avec le manuel à la création d'événements.

    • Cela ne semble pas fonctionner avec JSDom, a ajouté une mise à jour de cette.
    • vous avez absolument raison. J'ai mis à jour avec une solution qui devrait fonctionner, quoique messily.
    • Merci, cela fonctionne pour sur, mais ce que sur les événements où j'en aurais besoin pour définir les données d'événement (comme la mise en mot de code pour un événement keyup)? prêt, il me semble que je voudrais utiliser CustomEvent ou createEventObject toutefois, ni les méthodes qui semblent être pris en charge par JSDom
    • je devrais faire quelques recherches pour répondre à cette question avec certitude. Selon quelle fréquence vous allez à l'essai de ces événements, il peut être un cas pour une suite séparée de phantomJS tests 😐
    • Je ne pense pas que c'est exactement casher, mais vous pouvez simuler keycode simplement en attachant un keyCode propriété de l'instance d'événement avant de vous l'expédier avec initEvent
    • Je pense que ça va être un peu rare pour moi, pour ce faire, la plupart du temps, je vais être aux prises avec des événements à réagir composants qui réagissent déjà fournit des outils pour. C'est un cas particulier où l'événement est sur le document afin de traiter tout événement keyup (spécialement pour fermer un modèle de fenêtre lors de l'évasion est pressé).
    • Fixation d'un keyCode/which bien avant initEvent fonctionne. Je pense que je vais aller avec ça. Je ne suis pas 100% inquiet qu'il n'est pas vraiment casher depuis que je suis déjà à l'aide de jsdom qui n'est pas vraiment un dom. Je vais avoir des tests d'intégration qui vont à l'encontre de vrais navigateurs, ces tests unitaires sont juste conception pour aider à traiter les problèmes plus tôt avec des tests qui vont courir beaucoup plus vite que les tests d'intégration.
    • les sons que vous faites la bonne décision. Surtout si vous avez un niveau supérieur de tests d'intégration autour de ce. Vous pouvez toujours abstraction de la génération d'événements/de déclenchement pour une assistance si c'est trop laid.
    • oui, déjà abstraite que dans mon test helper, merci pour l'aide.
    • Mon gestionnaire d'événement utilise event.target, et en essayant de mettre evt.target = ... résultats dans TypeError: Cannot set property target of [object Object] which has only a getter. Toutes les idées sur la façon de joindre un target?
    • veuillez voir la section CustomEvent pour l'ajout de champs comme cible: developer.mozilla.org/en-US/docs/Web/Guide/Events/...

    InformationsquelleAutor Nick Tomlin
  2. 6

    Réagir.addons.TestUtils.Simuler fonctionne uniquement avec les événements virtuels. Si vous voulez expédition natif d'événements, vous pouvez le faire avec l'api DOM directement.

    Lors de la simulation d'un clic, si vous avez un composant qui rend cette:

    <div>
   <button onClick={alert}>click me</button>
</div>

    Et vous avez une référence à la <button/> dans une variable appelée 'buttonEl", et d'exécuter ce:

    React.addons.TestUtils.Simulate.click(buttonEl, 'hello world');

    Vous obtiendrez une alerte avec 'bonjour le monde' en elle. Tous les test utils n'est de créer l'événement virtuel, et laisser bouillonner le virtuel arborescence dom, appelant les gestionnaires d'événements le long de la voie.

    • est l'accolade d'incompatibilité délibéré? onClick={alert)
    • Non, merci 🙂 mais cette réponse est obsolète de toute façon
    InformationsquelleAutor Brigand
  3. 0

    Il suffit de créer un Event et c'est l'expédition:

    //Add an event listeners to the document
document.addEventListener('click', function() {
    console.log('test');
});

//Create a new `click` event and `dispatch` it
var event = new MouseEvent('click')
document.dispatchEvent(event)
    InformationsquelleAutor Riccardo Bartoli
  4. 0

    Event.initEvent() est obsolète et le Event() constructeur devrait maintenant être utilisé à la place.

    //Add a click event listener to the document
document.addEventListener('click', function() {
    console.log('test');
});

//Create a click event with optional event initialisers: bubbles, cancelable and composed
var evt = new Event('click', { bubbles: false, cancelable: false, composed: false });

//Event can then be dispatched against any element, not only the document
document.dispatchEvent(evt);
myDiv.dispatchEvent(evt);

    Prise en charge du navigateur est bonne à l'exception d'Internet Explorer.

    Références:

    InformationsquelleAutor Wayne