Ich versuche, eine React-Komponente zu testen, die den react-router separat von app.js benötigt.
Ich habe eine Komponente, die eine Umleitung mit dem Mixin Router.Navigation wie folgt macht:
%Vor%Ich habe versucht, einen Test dafür zu schreiben, aber lief gegen eine Wand. Abgesehen davon, dass ich transitionTo nicht wie erwartet testen kann, bin ich in meinen Jest-Tests auch auf diese Fehlermeldung gestoßen:
Warnung: Fehlgeschlagene Kontexttypen: Der erforderliche Kontext router wurde nicht in Searchbar angegeben.
Weiß jemand, wie ich die Warn- und Bonusfrage loswerden kann, wie ich testen kann, dass der Übergang wie erwartet funktioniert?
Ich habe diese und dieses Gespräch auf Github hier untersucht: Ссылка ist das nächste Ich Habe das Problem gefunden. Es sieht so aus, als ob ich den Router separat exportieren muss, aber das scheint eine Menge Overhead zu sein, um Komponententests einfach auszuführen ohne die Warnung a la Ссылка
Ist das wirklich der richtige Weg?
In Version 0.13 von React Router waren die Mixins Navigation und State veraltet. Stattdessen existieren die Methoden, die sie bereitstellen, für das Objekt this.context.router . Die Methoden sind nicht mehr veraltet, aber wenn du this.context.router explizit benutzt, brauchst du das Mixin nicht (aber du musst contextTypes direkt deklarieren); oder Sie können das Mixin verwenden, müssen aber this.context.router nicht direkt verwenden. Die Mixin-Methoden greifen auf Sie zu.
In beiden Fällen wird das Router#run -Objekt nicht an den Kontext übergeben, es sei denn, Sie rendern Ihre Komponente über React Router (über router ), und natürlich können Sie die Überleitungsmethode nicht aufrufen. Das ist es, was die Warnung Ihnen sagt: Ihre Komponente erwartet, dass der Router an sie weitergeleitet wird, aber sie kann sie nicht finden.
Um dies isoliert zu testen (ohne ein Routerobjekt zu erstellen oder die Komponente über Router#run auszuführen), könnten Sie ein verspottetes router -Objekt im Kontext der Komponente an der richtigen Stelle platzieren und testen, dass Sie transitionTo aufrufen. darauf mit dem richtigen Wert.
Hier ist meine Jest-Datei für eine vollständige Antwort auf diese Frage. Der letzte Absatz von BinaryMuse hat mich auf den richtigen Weg gebracht, aber ich finde Codebeispiele immer am hilfreichsten, also hier als Nachschlagewerk.
%Vor%Hoffe, das hilft jemandem in der Zukunft.
Da router stark von dem weniger bekannten Feature context von React abhängig ist, müssen Sie es wie beschrieben stubben. hier
Und verwende wie:
%Vor% Meine Antwort ist nicht Jest-spezifisch, aber es könnte Menschen helfen, das gleiche Problem zu lösen.
Ich habe eine Klasse erstellt, die router context umschließt.
Dann fügen Sie in Ihrem Test einfach
<ContextWrapper><YourComponent/></ContextWrapper>
Es kann nützlich sein, andere Dinge wie ReactIntl einzupacken.
Beachten Sie, dass Sie die Möglichkeit verlieren werden, seichtes Rendering zu verwenden, aber das ist bereits bei ReactIntl der Fall.
Ich hoffe, dass es jemandem hilft.
ContextWrapper.js
%Vor%Tags und Links reactjs react-router jestjs