web-dev-qa-db-fra.com

React & Jest, comment tester le changement d'état et rechercher un autre composant

React - Test Utilities Docs

J'ai un composant Login qui affichera un composant Notification si this.state.error Est vrai.

Je suis en train d'écrire un test Jest pour tester cela.

import React from 'react'
import ReactTestUtils from 'react-dom/test-utils';
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import Login from './Login'
import Notification from '../common/Notification'

describe('<Login /> component', () => {
    it('should render', () => {
        const loginComponent = shallow(<Login />);
        const tree = toJson(loginComponent);
        expect(tree).toMatchSnapshot();
    });

    it('should contains the words "Forgot Password"', () => {
        const loginComponent = shallow(<Login />);
        expect(loginComponent.contains('Forgot Password')).toBe(true);
    });

    // This test fails
    it('should render the Notification component if state.error is true', () => {
        const loginComponent = ReactTestUtils.renderIntoDocument(
            <Login />
        );

        const notificationComponent = ReactTestUtils.renderIntoDocument(
            <Notification />
        );

        loginComponent.setState({
            error: true
        }, expect(ReactTestUtils.isDOMComponent(notificationComponent)).toBe(true));
    });
});

Cependant, actuellement, le test échoue et je ne sais pas pourquoi.

enter image description here

Dans la dernière partie de mon code, j'ai également essayé en vain

loginComponent.setState({
        error: true
    }, expect(ReactTestUtils. isElement(notificationComponent)).toBe(true));

https://facebook.github.io/react/docs/test-utils.html

Le render () de mon composant Login

render() {
    const usernameError = this.state.username.error;
    const error = this.state.error;
    const errorMsg = this.state.errorMsg;

    return (
        <div className="app-bg">
            { error &&
                <Notification message={ errorMsg } closeMsg={ this.closeMessage }/>
            }
            <section id="auth-section">
                <header>
                    <img src="static/imgs/logo.png"/>
                    <h1>tagline</h1>
                </header>

A également essayé cette méthode pour tester le composant Notification après la définition de state.error sur true

it('should render the Notification component if state.error is true', () => {
    const loginComponent = ReactTestUtils.renderIntoDocument(
        <Login />
    );

    const notificationComponent = ReactTestUtils.renderIntoDocument(
        <Notification />
    );

    // loginComponent.setState({
    //  error: true
    // }, expect(ReactTestUtils.isDOMComponent(notificationComponent)).toBe(true));

    const checkForNotification = () => {
        const login = shallow(<Login />);
        expect(login.find(Notification).length).toBe(1);
    };

    loginComponent.setState({
        error: true
    }, checkForNotification());
});

Mais ce test a également échoué.

Aussi essayé const login = mount(<Login />);

Toute autre personne rencontrant un problème en utilisant Jest et le React Test Utilities?

javascriptreactjstestingjestjs
19
Leon Gaban

Deviner! N'avait pas besoin de tilitaires de test de réaction

it('should render the Notification component if state.error is true', () => {
    const loginComponent = shallow(<Login />);
    loginComponent.setState({ error: true });
    expect(loginComponent.find(Notification).length).toBe(1);
});

Cela définira l'état d'erreur sur true dans le composant Login, puis vérifiera si le composant Login contient le Notification composant.

42
Leon Gaban

Cela devrait probablement être refait un peu. Le composant Notification devrait probablement être toujours rendu dans un composant plus global (comme un wrapper de page ou un autre type de conteneur), et devrait probablement rendre null à moins que il y a des erreurs dans un réducteur global. Un composant Login ne devrait probablement pas conserver la responsabilité et la logique commerciale concernant les notifications.

2
Swivel