ユニットテストreact-router onEnter/onLeave

Question

onEnter/onLeaveでロジックを実行しました。私はsetIntervalをonEnterで使って、clearIntervalを使ってonLeaveでクリアしました。

上記のユニットテストはどのようにして行うことができますか？以下は

<Route 
     component={App} 
     onEnter={onEnterApp} 
     onLeave={onLeaveApp} 
     path="/app"> 

onEnterとonLeave小道具があなたの<App>部品のcomponentWillMountとcomponentWillUnmount方法に結び付け、これだけ<App>をマウントし、アンマウントされていない私のテストケースであるが、それは失敗し、

import React from 'react'; 
import App from '../components/views/app.jsx'; 
import {shallow, mount, render} from 'enzyme'; 
import {expect, assert} from 'chai'; 
import sinon from 'sinon'; 
import {mountWithIntl} from '../test_utils/intl-enzyme-test-helper.js'; 





describe(‘App renders correctly',() => { 

    it('When mounting set intervals',() => { 
     const wrapper = mountWithIntl(<App/>); 
     expect(window.x).to.exist; 
     expect(window.y).to.exist; 
    }); 

    it('When unmounting clear intervals',() => { 

     const wrapper = mountWithIntl(<App/>); 
     wrapper.unmount(); 
     expect(window.x).to.not.exist; 
     expect(window.y).to.not.exist; 
    }); 

}); 

Answer 1

これらの関数は呼び出されません。

あなたにルータが動作リアクト信頼を仮定すると、あなたは自分のonEnterAppとonLeaveApp機能が

describe('onEnterApp',() => { 
    it('sets x and y',() => { 
    onEnterApp(); 
    expect(global.x).to.exist; 
    expect(globa.y).to.exist; 
    }); 
}); 

あなたはURLが/appパスと一致した場合に、それらが実行されていることを確認したい場合は、正常に動作することをテストすることができます<Router>が必要です。

import createMemoryHistory from 'react-router'; 

describe('App',() => { 
    it('runs onEnterApp when navigating to /app', (done) => { 
    const history = createMemoryHistory(['/app']); 
    const holder = document.createElement('div'); 
    render((
     <Router history={history}> 
     <Route 
      component={App} 
      onEnter={onEnterApp} 
      onLeave={onLeaveApp} 
      path="/app"> 
     </Router> 
    ), holder,() => { 
     expect(global.x).to.exist; 
     expect(globa.y).to.exist; 
     done(); 
    }); 
    }); 
}); 

テストonLeaveAppはあなたhistoryインスタンスに新しい場所に移動し、目的のグローバルな状態が存在することをテストするために必要となります。

history.push({ pathname: '/foo' })