Réagir au test comment se moquer de componentDidMount ou l'écraser?
Je suis en train de tester une de réagir composant.
var Component = React.createClass({
componentDidMount: function () {
return this.setState({
name: 'blabla'
});
},
render: function () {
return (
<h1>{this.state.name}</h1>
);
}
});
Est-il un moyen, au cours des essais, pour se moquer de ce que componentDidMount
retourne ou n'? Que serait de me laisser tester sur son propre et juste tester le composant de rendu de comportement.
Merci!
source d'informationauteur Besart Hoxhaj
Vous devez vous connecter pour publier un commentaire.
L'idée ici, si je comprends bien, c'est que vous êtes en train d'écraser une fonction avant un composant est rendu dans votre test. Dans votre cas,
componentWillMount
n'est appelée qu'une fois dans un composant du cycle de vie, immédiatement avant que le composant est rendu. Donc vous ne pouvez pas seulement de rendre le composant et puis talon de la fonction, il doit être fait avant que le rendu se produit.Prenons ces composants par exemple:
parent.js
child.js
Ici, nous voudrions le talon de la
test
fonction avant notre composant Enfant est rendu, sinon, il va exploser.J'ai été capable de le faire à l'aide de jasmin-réagir. Ces fonctions d'assistance, de fournir certaines des fonctionnalités utiles lors de l'exécution des tests, presque au point où
TestUtils
peut être abandonné complètement.jasmineReact.render(component, [container])
rendra une instance decomponent
dans les DOM nœud spécifié dans[container]
. C'est commeTestUtils.renderIntoDocument()
sauf qu'il rend le composant dans un joint nœud DOM au lieu d'une maison individuelle nœud DOM. Il permettra également d'effectuer les opérations de nettoyage lorsque le test est terminé.jasmineReact.spyOnClass(componentClass, functionName)
va écraser une fonction particulière appartenant à une classe de composant. Ce comportement est maintenu jusqu'à la fin du test, ce qui signifie que vous pouvez appeler cette fonction avant un composant est rendu. Ce, si je comprends bien, est ce que vous cherchez.Donc, à l'aide de ces deux fonctions d'aide, je peux écrire un test pour le code ci-dessus qui ressemble à quelque chose comme ceci:
Laissez-moi savoir si vous avez des questions.
Je préfère l'approche suivante, mais nécessite l'utilisation de l'ES6 classes.
Le but est de créer à la demande ChildClass hériter de la OriginalClass,
faire ce que les remplacements et puis
TestUtils.renderIntoDocument(<ChildClass />)
J'ai trouvé deux façons d'aller à ce sujet (je suis sûr qu'il y a de plus).
1) j'ai utilisé sinon-chai et nécessaire dans l'élément de base de la classe et puis les utiliser rewireify de placer un ensemble un espion sur le
componentWillMount
méthode. Cela fonctionne, mais pas sûr de ce que les suites de test que vous utilisez.2), Probablement le moyen le plus facile. Est d'utiliser seulement la TestUtils pour obtenir une instance du composant, et puis il suffit de lancer manuellement le
componentWillMount
méthode.Que le second moyen ne serait probablement ressembler à quelque chose comme (pardonnez le pesudo code):