J'ai un composant réagissant relativement simple qui rend une liste basée sur son état. Ensuite, j'ai un test de karma / jasmin qui rend le composant, définit son état et vérifie que le point de repère correct est rendu.
Le problème que je suis en cours d'exécution est que chaque fois que je fais un Quelle est la bonne façon de tester les changements d'état Dans un composant réactif? p> setState ({} ) code> ou
forcerUpdate () code> sur mon composant, je reçois une erreur: p>
Code de réacteur: h2>
PhantomJS 1.9.7 (Linux) [object Object] [object Object] [object Object] should default its notification count to 0 FAILED
TypeError: 'undefined' is not an object (evaluating 'deepestAncestor.firstChild')
at /home/company/projects/user_interface_kit/bower_components/react/react.js:10314
at /home/company/projects/user_interface_kit/bower_components/react/react.js:10260
at getNode (/home/company/projects/user_interface_kit/bower_components/react/react.js:9874)
at /home/company/projects/user_interface_kit/bower_components/react/react.js:4472
at /home/company/projects/user_interface_kit/.tmp/notification_center/popover.js:28
at /home/company/projects/user_interface_kit/bower_components/react/react.js:5925
at /home/company/projects/user_interface_kit/.tmp/notification_center/popover.js:75
at /home/company/projects/user_interface_kit/bower_components/react/react.js:5925
at /home/company/projects/user_interface_kit/.tmp/notification_center/popover.js:81
at /home/company/projects/user_interface_kit/bower_components/react/react.js:10461
at /home/company/projects/user_interface_kit/bower_components/react/react.js:11924
at /home/company/projects/user_interface_kit/bower_components/react/react.js:13944
at /home/company/projects/user_interface_kit/bower_components/react/react.js:13877
at /home/company/projects/user_interface_kit/bower_components/react/react.js:4360
at /home/company/projects/user_interface_kit/bower_components/react/react.js:10055
at /home/company/projects/user_interface_kit/bower_components/react/react.js:11169
at /home/company/projects/user_interface_kit/bower_components/react/react.js:10105
at /home/company/projects/user_interface_kit/bower_components/react/react.js:11169
at /home/company/projects/user_interface_kit/.tmp/notification_center/notification_center.js:50
at /home/company/projects/user_interface_kit/bower_components/react/react.js:10461
at /home/company/projects/user_interface_kit/bower_components/react/react.js:11924
at /home/company/projects/user_interface_kit/bower_components/react/react.js:13944
at /home/company/projects/user_interface_kit/bower_components/react/react.js:13877
at /home/company/projects/user_interface_kit/bower_components/react/react.js:4360
at /home/company/projects/user_interface_kit/bower_components/react/react-with-addons.js:10483
at /home/company/projects/user_interface_kit/bower_components/react/react-with-addons.js:11597
at /home/company/projects/user_interface_kit/bower_components/react/react-with-addons.js:10533
at /home/company/projects/user_interface_kit/bower_components/react/react-with-addons.js:11597
at /home/company/projects/user_interface_kit/bower_components/react/react-with-addons.js:12716
at /home/company/projects/user_interface_kit/test/notification_center/notification_center_test.js:19
at /home/company/projects/user_interface_kit/node_modules/karma-jasmine/lib/adapter.js:171
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1585
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:841
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1074
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:126
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1117
at each (/home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:58)
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1118
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:895
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1074
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:126
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1117
at each (/home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:58)
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1118
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:895
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1074
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:126
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1117
at each (/home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:58)
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1118
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:895
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1074
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:126
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1117
at each (/home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:58)
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1118
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:895
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1074
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:126
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1117
at each (/home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:58)
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1118
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:895
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1074
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:126
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1117
at each (/home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:58)
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1118
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:895
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1074
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:126
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1117
at each (/home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:58)
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1118
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:895
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1074
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:126
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1117
at each (/home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:58)
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1118
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:895
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1104
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:754
at callGetModule (/home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1129)
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1479
at /home/company/projects/user_interface_kit/node_modules/karma-requirejs/lib/require.js:1606
4 Réponses :
Après avoir creusé de profonds dans la réaction et réagir_with_addons fonctionne, on dirait que l'objet de réact local dans le test est différent de celui de réagir que réactive_with_adons utilise. Donc, si vous faites cela dans votre test:
function renderIntoDocument(instance) { var div = document.createElement('div'); return React.renderComponent(instance, div); };
Est-ce toujours un piratage valide? Ou y a-t-il une bonne solution de contournement maintenant?
Je vais deviner que ce n'est plus valide, puisque Reall a parcouru de nombreux changements puisque cette réponse a été écrite.
Je ne sais pas si la réponse précédente est toujours vraie.
avec réact 0.11.1, ce code fonctionne bien: P>
var React = require('react/addons'); var TestUtils = React.addons.TestUtils; jest.dontMock('public/components/MyThing.jsx'); var MyThing = require('public/components/MyThing.jsx'); describe('MyThing', function() { var html; describe('#render', function() { beforeEach(function(){ var component = MyThing(); var componentInstance = TestUtils.renderIntoDocument(component); componentInstance.setState({isCool: true}); html = componentInstance.getDOMNode().textContent; }); it('includes something cool', function(){ expect(html).toContain('something cool'); }); }); });
Quelqu'un peut-il vérifier si cela fonctionne toujours avec 0.12. * Code>?
Vous pouvez toujours utiliser des testutils.RenderItodocument d'origine, il suffit de faire, c'est que vous devez vous déplacer nécessiter de réagir à l'image. Parce que si vous avez besoin de réagir globalement, le contexte sera différent pour chaque test, ce qui provoque 2 instances différentes monter le même composant.
beforeEach(function () { React = require('react/addons'); TestUtils = React.addons.TestUtils; });
Cette réponse m'a juste sauvé après près d'une semaine de débogage :)
Ceci est le code source de renduintodocument (réagit 0.14.8 J'utilise dans un projet): https://github.com/facebook/reacct /blob/v0.14.8/src/test/reactestestutils.js#l79
Et voici quand il a été changé - il y a plus de 2 ans: https://github.com/facebook/react/commit/ce95c3d042309de43d7e4cf96455 p>
Donc, malgré le nom, il ne rend pas rien de plus en malgré le nom Le document. P>
Je peux également confirmer que la réponse d'Assaf fonctionne toujours pour 0,14.8 - essentiellement, écrivez votre propre renduintodudocument. Voici ce qui a fonctionné pour moi: p>
Il est intéressant de noter que cela pourrait ne pas faire leurs tests i> échouez, mais cela a certainement fait mien (parce que mon code attendu attendu element.ownerdocument.body.contains (élément) code> pour retourner vrai pour tous les rendus éléments).
Pouvez-vous poster plus de la trace de la pile? Quelle ligne de votre test provoque la lancée de l'exception?
Un cas de reproduction minimal (en JSBIN, etc.) serait utile; Vous ne devriez jamais obtenir cette erreur. N'hésitez pas à déposer comme un bogue sur le repo Reago.
J'ai ajouté la trace complète de la pile. La ligne qui provoque l'exception est la .SetState (). Je reçois la même erreur si je mettez à jour l'objet de l'état manuellement et appelez PORTEUPDATEDATED () sur l'appel ForcerUpdate. Il semble que cette erreur arrive lorsque le composant essaie de se rendant.
@Benalpert, je ne pouvais pas facilement faire de Jsbin / violon, mais j'ai créé un petit projet reproduisant le problème. Joli simple Github.com/treehau5/react_karma_requirejs_bug_reproduction