如何用Enzyme测试React组件中不同Redirect的跳转目标？

别担心，其实你有几种简单的方法来验证具体渲染的是哪一个Redirect组件，而且Enzyme完全支持通过属性来筛选元素——可能你之前看文档的时候没get到正确的用法😉

方法1：检查Redirect组件的to属性值 #

这是最直接的方式：先找到渲染的Redirect组件，然后通过prop()方法获取它的to属性，再断言是否符合预期。

示例测试代码：

// 测试条件为true时，跳转到page1
it('redirects to page1 when condition is true', () => {
  const wrapper = shallow(<YourComponent condition={true} />);
  const redirectComponent = wrapper.find('Redirect');
  
  expect(redirectComponent.length).toEqual(1);
  expect(redirectComponent.prop('to')).toBe('page1');
});

// 测试条件为false时，跳转到page2
it('redirects to page2 when condition is false', () => {
  const wrapper = shallow(<YourComponent condition={false} />);
  const redirectComponent = wrapper.find('Redirect');
  
  expect(redirectComponent.length).toEqual(1);
  expect(redirectComponent.prop('to')).toBe('page2');
});

方法2：使用属性选择器直接定位目标Redirect #

Enzyme支持类似CSS选择器的语法，你可以直接通过标签+属性的组合来筛选特定的Redirect组件，然后断言它是否存在。

示例测试代码：

it('renders Redirect to page1 when condition is true', () => {
  const wrapper = shallow(<YourComponent condition={true} />);
  // 直接定位to属性为page1的Redirect
  expect(wrapper.find('Redirect[to="page1"]').length).toBe(1);
});

it('renders Redirect to page2 when condition is false', () => {
  const wrapper = shallow(<YourComponent condition={false} />);
  // 直接定位to属性为page2的Redirect
  expect(wrapper.find('Redirect[to="page2"]').length).toBe(1);
});

补充说明 #

你之前提到“无法通过标签加属性的方式定位元素”可能是个误解——Enzyme的选择器完全支持这种用法，和常规的CSS属性选择器逻辑一致。如果之前尝试没成功，可能是语法小问题（比如引号的使用），上面的示例应该能帮你解决问题。

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