Wie testet man Native Komponenten mehr als eine Ebene tief?

Question

Die bevorzugte Methode zum Testen von React Native-Komponenten scheint jetzt zu sein, eine Kombination aus Mocha, React-Native-Mock und Enzym zu flachen Render-Komponenten zu verwenden.

Das Problem ist, dass seichtes Rendering nur eine Ebene tief geht, und manchmal Komponenten verschachtelte Ansichten haben, die erfordern, dass Sie eine zusätzliche Ebene oder zwei testen.

In der Theorie unterstützt Enzym mount(), um eine Komponente vollständig zu rendern, aber in der Praxis schlägt dies fehl, weil react-native-mock's View mock does not recurse into children.

Angesichts dieser Einschränkungen, wie testen Menschen ihre Komponenten tiefer als ein Render-Level?

Answer 1

Ich konnte dies lösen, indem sie meine Komponententests von Mokka Vermittlungs- und die Anweisungen hier für Snapshot-Tests im Nachgang zu scherzen:

: https://facebook.github.io/jest/docs/tutorial-react-native.html

ich dann Scherz zu meinem bestehenden Testziel in package.json hinzugefügt

"test": mocha … && jest"

Eine Sache bewusst zu sein, ist, dass ich die Anweisungen zu befolgen hatte zu Mocks für Dinge hinzufügt ich erwartet hätte aus dem Kasten haben verspottet (zB. TextInput) sowie mit moduleNameMapper zu map einige native componen ts, die nicht richtig aufgelöst wurden.

Answer 2

Wir lösten das Problem, mount() zu bekommen, mit Enzym zu arbeiten, um reagierende native Bestandteile vollständig zu übertragen. Wir haben darüber unter https://blog.joinroot.com/mounting-react-native-components-with-enzyme-and-jsdom/

geschrieben. Wenn Sie unsere Gabel verwenden, react-native-mock-render, und jsdom einrichten, können Sie Komponenten installieren.