Déterminer comment modifier le changement de taille de la fenêtre pour un test de composant de réaction

Question

Donc, fondamentalement, lorsque le composant est monté, un écouteur d'événements écoute les événements de redimensionnement. Il bascule l'état isMobileView puis le passe dans les enfants comme un accessoire. Il est donc impératif que cela fonctionne et soit testé. Je suis relativement novice dans le domaine des tests et j'essaie de trouver un moyen de rédiger un test qui redimensionne la fenêtre et fait en sorte que toute la logique se déroule et teste qu'elle s'exécute comme elle 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 assure que l'état change correctement. À l'aide de Jest and Enzyme, vous pouvez effectuer les opérations suivantes:

Answer 1

. Jest a JSDOM cuit dans Dans vos tests Jest fournit l'objet window et il est représenté par global (je pense que la valeur par défaut window.innerWidth fixé par Jest 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. 
});