Essayer de comprendre comment, à se moquer de la taille de la fenêtre en train de changer pour une réagir la composante test

Donc, fondamentalement, lorsque le composant monte, j'ai un écouteur d'événement écouter les événements de redimensionnement. Il bascule la isMobileView état et passe ensuite dans les enfants comme un accessoire. Il est donc impératif que cela fonctionne et est testé. Je suis assez nouveau à l'essai et j'essaie de trouver un moyen pour que je puisse écrire un test qui se redimensionne la fenêtre et fait toute la logique de produire et de test qu'il a exécuté la façon dont il le devrait.

Voici le code - 

componentDidMount() {
    this.setMobileViewState()
    window.addEventListener('resize', this.setMobileViewState.bind(this));
}

setMobileViewState() {
    if(document.documentElement.clientWidth <= this.props.mobileMenuShowWidth) {
        this.setState({ isMobileView: true })
    } else {
        this.setState({ isMobileView: false })
    }
}

Je sais que le code fonctionne, mais je veux écrire un test pour elle. Fondamentalement juste quelque chose qui fait en sorte que les changements d'état de correctement.

  • Je peux vous montrer comment le tester dans ce moka/sinon si ça vaut quelque chose pour vous.
  • qui serait parfait, je veux une introduction à l'sinon ce serait un grand moment pour moi de l'apprendre, je suppose. Si je vois code de travail, il va beaucoup m'aider si. Vous ne savez pas si je peux le comprendre, à partir d'autres exemples
  • Toutes mes excuses, je pensais que je pouvais le faire fonctionner mais je ne peux pas comprendre comment le stub document.documentElement
InformationsquelleAutor joe | 2017-08-24
  1. 23

    À l'aide de la Plaisanterie et de l'Enzyme vous pouvez effectuer les opérations suivantes. La plaisanterie a JSDOM cuit. Dans vos tests Plaisanterie fournit la window objet et il est représenté par global (je pense que le défaut window.innerWidth fixé par Plaisanterie est 1024px):

    test('Test something when the viewport changes.', () => {

    //Mount the component to test.
    const component = mount(<ComponentToTest/>);

    ...

    //Change the viewport to 500px.
    global.innerWidth = 500;

    //Trigger the window resize event.
    global.dispatchEvent(new Event('resize'));

    ...

    //Run your assertion.
});
    • selon les docs à developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth, innerWidth est en lecture seule. devons-nous utiliser la fenêtre.resizeBy(x, y); à la place?
    • ne fonctionne pas avec [email protected]
    • Je suis sur Jest 23.6.0 et ça marche pour moi, peut-être besoin d'une mise à niveau ♂️
    • Confirmé travailler toujours dans la Plaisanterie 24.1.0 ainsi. le resizeBy serait logique de les utiliser, mais la Plaisanterie ne pas la mettre et la innerWidth n'est pas en lecture seule
    • Il semble que cela ne fonctionne plus: Property 'innerWidth' does not exist on type 'Global'
    • Fonctionne très bien dans la Plaisanterie 21.2.1
    • j'ai essayé de réglage innerWidth sur la fenêtre de l'objet, mais mon @media css requête ne semble pas de coup de pied pour le test. ne cela ne fonctionne que pour "mondiale" de l'objet dans node.js ou devrait-il travailler pour la "fenêtre" de l'objet dans le navigateur trop?

    InformationsquelleAutor JoeTidee
  2. 4

    Si vous obtenez le tapuscrit message d'erreur

    Ne peut pas l'affecter à 'innerWidth" parce que c'est une propriété en lecture seule.

    Essayer: 

    Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 200})
    • Merci, cette réponse totalement de l'aide lors de l'utilisation de la Plaisanterie avec Tapuscrit
    InformationsquelleAutor Lauren Madigan