如何在Enzyme测试中修改MemoryRouter路由路径以测试组件？

嘿，我刚好做过类似的路由切换测试，给你分享两种靠谱的方法来搞定这个问题！你已经用MemoryRouter把组件挂载到Enzyme里了，初始路径测试正常，现在要验证路径从/path/param1切换后的组件表现，核心思路就是获取到history实例，主动触发路径变更，再让Enzyme捕获组件的更新。

方法一：从已挂载的MemoryRouter中获取history #

你可以直接从Enzyme的包装器里提取MemoryRouter的history属性，然后用它来触发路径跳转：

import { mount } from 'enzyme';
import { MemoryRouter, Switch, Route } from 'react-router-dom';
import MyComponent from './MyComponent';

describe('MyComponent history change test', () => {
  it('should behave correctly when path changes from /path/param1 to /path/param2', () => {
    // 初始挂载组件，指定初始路径
    const wrapper = mount(
      <MemoryRouter initialEntries={['/path/param1']}>
        <Switch>
          <Route path="/path" component={MyComponent} />
        </Switch>
      </MemoryRouter>
    );

    // 从MemoryRouter实例中获取history对象
    const history = wrapper.find('MemoryRouter').prop('history');

    // 触发路径切换
    history.push('/path/param2');

    // 关键：手动调用update()让Enzyme更新组件渲染
    wrapper.update();

    // 这里根据你的组件逻辑写断言，比如检查内容变化、状态更新等
    expect(wrapper.find('.param-display').text()).toBe('param2');
    expect(wrapper.instance().state.activeParam).toBe('param2');
  });
});

方法二：自定义MemoryHistory实例（更灵活） #

如果需要更精细控制history的行为，比如模拟前进/后退，可以用history库的createMemoryHistory创建自定义实例，再传递给Router组件：

import { mount } from 'enzyme';
import { Router, Switch, Route } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import MyComponent from './MyComponent';

describe('MyComponent history navigation test', () => {
  it('should handle path change via history push', () => {
    // 创建自定义history实例，设置初始路径
    const history = createMemoryHistory({
      initialEntries: ['/path/param1']
    });

    // 挂载组件时传入自定义history
    const wrapper = mount(
      <Router history={history}>
        <Switch>
          <Route path="/path" component={MyComponent} />
        </Switch>
      </Router>
    );

    // 切换到新路径
    history.push('/path/param3');
    wrapper.update();

    // 验证组件响应
    expect(wrapper.find('.some-target-element').exists()).toBe(true);

    // 还可以测试后退行为
    history.goBack();
    wrapper.update();
    expect(wrapper.find('.param-display').text()).toBe('param1');
  });
});

注意要点 #

• 一定要调用wrapper.update()：Enzyme不会自动监听history的变化，所以路径切换后必须手动触发组件更新，才能捕获到最新的渲染状态。
• 如果你的组件是通过withRouter高阶组件注入history的，两种方法都适用，因为MemoryRouter和自定义Router都会把history传递给路由组件。
• 可以根据组件的逻辑，断言DOM变化、状态更新、方法调用（比如用jest spy监听组件的回调函数）等。

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