Unit Test react-router onEnter/onLeave - unit-testing

Question

I've some logic runs at onEnter/onLeave. I've used some setInterval at onEnter and clear them at onLeave using clearInterval.
How can I unit test above case?
<Route
component={App}
onEnter={onEnterApp}
onLeave={onLeaveApp}
path="/app">
Below is my test case but it fails ,
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

The onEnter and onLeave props aren't tied to the componentWillMount and componentWillUnmount methods of your <App> component, so just mounting and unmounting the <App> will not call those functions.
Assuming you trust that React Router works, you can just test that your onEnterApp and onLeaveApp functions work properly
describe('onEnterApp', () => {
it('sets x and y', () => {
onEnterApp();
expect(global.x).to.exist;
expect(globa.y).to.exist;
});
});
If you want to verify that they are run when the URL matches the /app path, then you will need to involve a <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();
});
});
});
Testing onLeaveApp would require you to navigate to a new location with your history instance and then test that the desired global state exists.
history.push({ pathname: '/foo' })