单元测试反应路由器 onEnter/onLeave

Question

我有一些逻辑运行在 onEnter/onLeave。我在 onEnter 中使用了一些 setInterval 并在 onLeave 中使用 clearInterval.

清除了它们

如何对上述案例进行单元测试？

<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;
    });

});

Answer 1

onEnter 和 onLeave 道具与 <App> 组件的 componentWillMount 和 componentWillUnmount 方法无关，所以只需安装和卸载<App> 不会调用这些函数。

假设您相信 React Router 可以正常工作，您可以测试您的 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' })

单元测试反应路由器 onEnter/onLeave

Unit Test react-router onEnter/onLeave

unit-testing

reactjs

jestjs

react-router