Comment se moquer des accessoires qui sont réellement des créateurs d'actions connectés de Redux?

Question

Dans un test d'intégration, je veux tester qu'un créateur d'action connecté est appelé.

describe('SomeContainer',() => { 
    let subject, store, fancyActionCreator 

    beforeEach(() => { 
    store = createStore(combineReducers({ /* ... */ })) 
    fancyActionCreator = sinon.spy() 
    const props = { 
     fancyActionCreator 
    } 
    subject = (
     <Provider store={store}> 
     <SomeContainer {...props} /> 
     </Provider> 
    ) 
    }) 

    it('calls fancyActionCreator on mount',() => { 
    mount(subject) 
    expect(fancyActionCreator.callCount).to.equal(1) 
    }) 
} 

Le créateur d'action est appelée à l'intérieur componentWillMount et fonctionne comme prévu au-delà de l'environnement de test. Le problème est que le créateur d'action original est appelé dans le test et n'est pas raillé correctement.

J'ai le sentiment qu'il est à cause de la méthode connect() de Redux qui remplace l'espion:

connect(mapStateToProps, { fancyActionCreator })(SomeContainer) 

Answer 1

montage de votre composant avec magasin. Si vous prenez la valeur de retour de l'appel de montage, il vous donne l'enveloppe d'enzyme pour l'élément de réaction. Cette enveloppe peut être utilisé pour envoyer des actions contre magasin:

const enzymeWrapper = mount(subject) 
enzymeWrapper.node.store.dispatch({ type: "ACTION", data: "your fake data" }); 

Mais ce qui est plus type de tests d'intégration, parce que vous utilisez Réducteurs ainsi que la connexion de l'état du magasin Redux à vos propriétés.

C'est le seul test que j'ai pu tester pour tester la connexion de l'état du magasin Redux aux propriétés du composant. Si vous fakez des propriétés d'une autre manière, vous pourriez couvrir la logique de votre composant, mais il vous manque une pièce qui connecte les propriétés à stocker.

Je suggérerais de séparer vos composants en composants de présentation vs conteneur. Presentational n'a pas besoin d'utiliser store et vous pouvez donc marteler sa logique en passant simplement différentes propriétés. La préoccupation du composant conteneur est de connecter le magasin aux composants de présentation. Donc, pour le composant conteneur, vous utiliserez le type de test que j'ai décrit.

RÉACTIONS COMMENTAIRE:

En fait, l'utilisation de mount vs shallow pour le composant de présentation/sans lien n'est pas que simple. Parfois vous utilisez des sous-composants sur votre composant de présentation qui doivent être rendus par mount (par exemple, rea-select nécessite DOM pour une raison quelconque).

Mais généralement oui, on devrait s'efforcer d'utiliser shallow pour les composants de présentation, sauf si vous réalisez que vous avez besoin de mount :).