web-dev-qa-db-fra.com

Comment simuler le changement de taille de fenêtre pour un test de composant React

Donc, fondamentalement, lorsque le composant monte, j'ai un écouteur d'événements qui écoute les événements de redimensionnement. Il bascule l'état isMobileView, puis le transmet aux enfants comme accessoire. Il est donc impératif que cela fonctionne et soit testé. Je suis assez nouveau dans les tests et j'essaie de trouver un moyen d'écrire un test qui redimensionne la fenêtre et fait en sorte que toute la logique se produise et teste qu'il a exécuté comme il se doit.

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 cela. Fondamentalement, juste quelque chose qui garantit que l'état change correctement.

javascriptreactjsunit-testingjestjsenzyme
17
joe

En utilisant Jest et Enzyme, vous pouvez effectuer les opérations suivantes. Jest contient JSDOM. 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 défini 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.
});
26
JoeTidee

Si vous obtenez le message d'erreur TypeScript

Impossible d'affecter à 'innerWidth' car il s'agit d'une propriété en lecture seule.

Essayer:

Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 200})
7
Lauren Madigan

Cette ligne a fonctionné le mieux pour moi.

window = Object.assign(window, { innerWidth: 500 });
1
Lital Levy