我在onEnter / onLeave上运行了一些逻辑。我在onEnter上使用了一些setInterval
并使用clearInterval
在onLeave上清除它们。
我如何对上述情况进行单元测试?
<Route
component={App}
onEnter={onEnterApp}
onLeave={onLeaveApp}
path="/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;
});
});
答案 0 :(得分:1)
onEnter
和onLeave
道具与componentWillMount
组件的componentWillUnmount
和<App>
方法无关,因此只需安装和卸载<App>
不会调用这些函数。
假设您相信React Router正常工作,您只需测试onEnterApp
和onLeaveApp
功能是否正常工作
describe('onEnterApp', () => {
it('sets x and y', () => {
onEnterApp();
expect(global.x).to.exist;
expect(globa.y).to.exist;
});
});
如果您想要在网址与/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' })