2016-03-11 4 views
6

Ich versuche Einheitentests für eine React-Anwendung hinzufügen und möchte die Routen von React Router (2.0.1) testen. Ich möchte testen, ob bestimmte Pfade, die ich anbiete, einer Route entsprechen. Ich schreibe meine Tests mit Mocha und erwarte.Unit testing Route Abgleich mit React Router 2

Ich habe die Dokumentation über das React Router-Repository durchgesehen, aber der einzige Testleitfaden, den ich sehen konnte, war, zu erklären, wie man einen <Link /> testet und wie er gerendert wird.

sagen, dass ich den folgenden Code haben:

// import statements omitted for brevity 

export const routes = (
    <Route path="/" component={App}> 
     <IndexRoute component={Index} /> 
     <Route path="/foo"> 
      <IndexRoute component={FooIndex} /> 
      <Route path="add" component={FooAdd} /> 
      <Route path=":fooId" component={FooDetails} /> 
     </Route> 
    </Route> 
) 

ReactDOM.render(
    <Router history={browserHistory}>{routes}</Router>, 
    document.getElementById('app') 
) 

Wie kann ich testen, ob die in der routes Variable erstellt Routen der folgenden entsprechen würde:

  • /
  • /foo
  • /foo/add
  • /foo/25

Aber nicht Routen wie:

  • /foo/bar/12
  • /bar

Grunde möchte ich, dass jeder erwartet, URL-Format eine Route hat zu prüfen, ob sie übereinstimmen und dass unerwartete URLs keinen Routen entsprechen.

Ich interessiere mich nicht für die Elemente, die von den Routen gerendert werden, also wollen meine Tests nicht darauf basieren zu überprüfen, ob eine bestimmte Sache gerendert wird, nur dass eine passende Route gefunden wurde und vorzugsweise eine Art der Überprüfung dass es in der Tat die erwartete Route war (würde ich prüfen, was der Name der Komponente ist oder so?)

Jede Hilfe wird dankbar geschätzt.

Dank

Antwort

1

Wir prüfen genau dies in unserem Test für matchRoutes: https://github.com/ReactTraining/react-router/blob/v3/modules/__tests__/matchRoutes-test.js

Sie dieses Muster folgen können. Wenn Sie Ihre Routen nicht als Referenz identifizieren können, können Sie tatsächlich auch die Komponenten angeben, die gerendert wurden.

Als matchRoutes nicht exportiert wird, sollten Sie die match Helfer verwenden (sonst für serverseitige Rendering verwendet) statt, und prüfen Sie renderProps.routes oder renderProps.components.

+0

Danke. Ich habe mir die Tests angeschaut, die Sie verlinken, und sie scheinen der richtige Weg zu sein. Das erste Problem, auf das ich gestoßen bin, ist, dass die 'matchRoutes()' Funktion anscheinend überhaupt nicht in die 'index.js' Datei exportiert wird, also bin ich ein bisschen fest, wie ich darauf zugreifen würde? –

+0

Ich habe die Antwort aktualisiert - benutze 'match()'. – taion

+0

Können Sie diese Antwort mit einem funktionierenden Link aktualisieren? –