2016-08-16 4 views
6

Ich versuche, React-Komponente zu testen, die Browserhistory von React-Router verwendet. Um zu gewährleisten, Zugang zu browserHistory Ich verwende createMemoryHistory (reagieren-Router-Modul) wie folgt aus:Wie man BrowserHistory in der Einheittestumgebung vortäuscht?

let createMemoryHistory = require('react-router/lib/createMemoryHistory'); 

Im Test env I Vorteil JSDOM Bibliothek nehme.

Dann versuche ich, erstellt Geschichte Objekt DOM zuzuordnen:

let history = createMemoryHistory(); 
global.history = history; 

Während Rendering-Komponente in der Testumgebung, ich folgende Störung zu erhalten:

Invariant Violation: Browser history needs a DOM

Jede Idee Wie man es überwinden kann?

+1

Sie müssen ein Mock-History-Objekt implementieren und dieses stattdessen verwenden –

+0

Weitere Anweisungen oder Codebeispiele? – magos

+1

Sie können sinon/spies verwenden, um die von Ihnen verwendeten Methoden nachzuahmen. Siehe http://sinonjs.org/ –

Antwort

0

Sie müssen das BrowserHistory-Objekt mocken. Sie können sinon verwenden, um Spione oder Stubs zu erstellen, die Ihnen beim Testen helfen.

Zum Beispiel:

Mit spy

const { createBrowserHistory } = require('history'); 

const history = createBrowserHistory(/* ... */); 

sinon.spy(history, "push"); 

// now you should be able to run assertions on history.push 

assert(history.push.calledOnce) 

Mehr zu den spy und stub

http://sinonjs.org/releases/v4.1.6/spies/

http://sinonjs.org/releases/v4.1.6/stubs/

Verwandte Themen