Obtenir l'état des composants enfants connectés à Redux avec Enzyme

Question

Je suis en train d'essayer de tester un composant connecté à redux. Le composant change ses propriétés lors d'un événement de redimensionnement.

Je veux monter mon composant DatePicker avec enzyme, envoyer un événement de redimensionnement, et vérifier que la valeur de la propriété de mon DatePicker IS_DESKTOP_VIEWPORT === true et que, en conséquence, l'état de mon DatePicker a également changé.

Cependant, je ne peux pas accéder à l'état de mon DatePicker car enzyme ne permet pas d'accéder à l'état si le composant du wrapper n'est pas la racine :

console.log(wrapper.find('DatePicker').state())
// ReactWrapper::state() can only be called on the root

J'ai essayé d'envelopper le DatePicker connecté dans un Provider comme le suggèrent les docs, ainsi que de le monter directement mais en passant le store en tant que prop. Aucune de ces méthodes ne semble me permettre de considérer DatePicker comme le composant racine et donc aucune de ces méthodes ne me permet de récupérer l'état de mon composant.

Voici mes tentatives : La sortie de ces journaux de console est ici : https://gist.github.com/gecko25/56fb14154585a2d06697c399685c9111

import React from 'react';
import { Provider } from 'react-redux';
import PropTypes from 'prop-types';
import { mount } from 'enzyme';
import configureDataStore from '%SRC%/store/configure';
import { windowResize } from '%CONSTANTS%/store/actions';
import  ConnectedDatePicker, { DatePicker }  from './DatePicker';

const DESKTOP = 1025;

describe('calendrier ouvert et fermé', () => {

    test('tentative de connexion #1', ()=>{

        const store = configureDataStore();

        const options = {
          context: { store },
          childContextTypes: { store: PropTypes.object }
        }

        const wrapper = mount()

        store.dispatch(windowResize(DESKTOP));

        console.log('état-->', wrapper.state()) // {}
        console.log('props-->', wrapper.props()) // Ne inclut pas toutes mes props spécifiques au composant
        console.log(wrapper.find('DatePicker').props()) // Imprime toutes les props comme prévu
        console.log(wrapper.find('DatePicker').state()) // Erreur

        console.log('--------------------------')

    })

    test('tentative de connexion #2', () => {

        const store = configureDataStore();

        const options = {
          context: { store },
          childContextTypes: { store: PropTypes.object }
        }

        const wrapper = mount(, options)

        store.dispatch(windowResize(DESKTOP));

        console.log('état-->', wrapper.state()) // {}
        console.log('props-->', wrapper.props()) // Ne inclut pas toutes mes props spécifiques au composant
        console.log(wrapper.find('DatePicker').props()) // Imprime toutes les props comme prévu
        console.log(wrapper.find('DatePicker').state()) // Erreur

    });

    test('tentative de connexion #3', () => {

        const store = configureDataStore();

        const wrapper = mount()

        store.dispatch(windowResize(DESKTOP));

        console.log('état-->', wrapper.state()) // null
        console.log('props-->', wrapper.props()); // Ne inclut pas toutes mes props spécifiques au composant
        console.log(wrapper.find('DatePicker').props()) // Imprime toutes les props comme prévu
        console.log(wrapper.find('DatePicker').state()) // Erreur
        console.log('--------------------------')

    });
});

Answer 1

wrapper.find('DatePicker').instance().state devrait fonctionner pour vous :)