如何用Jest和Enzyme测试React UI-Router状态切换后的组件加载？

问题根源分析 #

你遇到的TypeError: Cannot read property 'stateService' of undefined错误，是因为直接调用Transition.router时，Transition类的router属性还未被初始化——这个属性只有在UIRouter组件完成挂载、内部初始化好路由实例后才会被赋值。另外你的测试顺序也有问题：应该先挂载组件，再触发状态跳转，否则路由系统还没准备好处理导航指令。

修正后的测试方案 #

下面是调整后的测试代码，结合UI-Router 0.8.x的API，实现程序化状态切换后断言目标组件加载：

import React from 'react';
import { UIRouter, createRouter, pushStateLocationPlugin } from '@uirouter/react';
import { mount } from 'enzyme';
import { Home, Page } from './components/Layout';
// 导入你定义的路由状态数组
import { states } from './your-states-file';

describe('UIRouter navigation', () => {
  it('successfully loads Home component when navigating to "home" state', async () => {
    // 1. 创建并配置路由实例
    const router = createRouter({
      plugins: [pushStateLocationPlugin],
      states: states,
    });

    // 2. 挂载UIRouter组件
    const wrapper = mount(
      <UIRouter router={router}>
        <Page />
      </UIRouter>
    );

    // 3. 获取stateService并触发状态跳转（异步操作，需await）
    await router.stateService.go('home');

    // 4. 强制更新Enzyme wrapper，捕获路由切换后的DOM变化
    wrapper.update();

    // 5. 断言Home组件已加载到DOM中
    expect(wrapper.find(Home).length).toBe(1);
  });
});

关键细节说明 #

• 正确初始化路由实例：用createRouter方法手动创建路由实例，确保路由系统在测试前就完成基础配置，避免依赖组件内部的隐式初始化。
• 处理异步状态切换：UI-Router的状态切换是异步操作，必须用async/await（或done回调）等待导航完成，否则断言会在组件渲染前执行，导致结果不符合预期。
• 手动更新wrapper：Enzyme不会自动捕获异步状态变化导致的DOM更新，所以需要调用wrapper.update()强制同步最新的DOM状态。
• 正确查找组件：wrapper.find(Home)是传入组件类，而不是<Home />JSX元素，后者会导致查找失败。

额外注意事项 #

如果你不想手动创建路由实例，也可以通过组件的Context获取已初始化的路由实例，比如：

const router = wrapper.instance().context.router;
await router.stateService.go('home');

不过这种方式依赖组件内部的Context传递，不如手动创建实例稳定可控。

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