Jest测试添加<Router>后render函数渲染空<body>的问题与解决

问题背景 #

我在做React Router V3的功能测试，场景是：

• 组件通过step属性设置状态变量，渲染对应的子组件
• 根据传入的props展示对应页面
• 涉及Home和TestComponent两个组件

测试流程是：渲染step=1的Home组件，点击页面上的#basicSearchTile元素跳转到对应路由，然后检查页面元素。但每次执行render后，screen.debug()输出的都是空的<body>标签，不过应用本身的路由功能完全正常，只有测试环节出问题。

问题解决 #

问题出在测试代码里路由组件的写法上，调整路由的包裹方式后，测试就能正常获取页面内容了。

修复后的测试代码示例 #

import React from 'react';
import { mount } from 'enzyme';
import { Router, Route, browserHistory } from 'react-router';
import Home from './Home';
import TestComponent from './TestComponent';

describe('Home Component Router Navigation', () => {
  it('should navigate to TestComponent on tile click', () => {
    // 关键：用Router包裹所有路由，传入正确的history对象
    const wrapper = mount(
      <Router history={browserHistory}>
        <Route exact path="/" render={() => <Home step={1} />} />
        <Route path="/test" component={TestComponent} />
      </Router>
    );

    // 模拟点击跳转元素
    wrapper.find('#basicSearchTile').simulate('click');

    // 等待路由更新
    setTimeout(() => {
      screen.debug(); // 现在能正常输出页面DOM内容
      expect(wrapper.find(TestComponent).exists()).toBe(true);
    }, 0);
  });
});

关键调整说明 #

之前的测试代码可能没有用Router组件正确包裹路由配置，或者没有传入有效的history对象。在React Router V3的测试场景中，必须显式用Router包裹所有Route定义，并传入browserHistory（或其他适配测试的history），才能让测试环境下的路由正常工作，确保组件能被正确渲染并捕获到DOM内容。

内容的提问来源于stack exchange，提问作者VoodooJellyfish