测试vertical stepper时debug无“Property”文本，如何找到对应屏幕节点？

你遇到的问题本质是Redux连接组件在测试环境没有拿到正确的store上下文，导致mapStateToProps返回的steps为空，触发可选链?.后不会渲染步骤节点。可以通过以下两种方案解决：

方案1：测试原始未连接组件（推荐，单元测试优先选择） #

单元测试不需要耦合Redux逻辑，直接测试纯组件即可：

1. 先在组件文件中新增命名导出，暴露未连接的原始组件：

// 组件文件修改导出方式
export function VerticalStepperComponent(props) {
  // 原有组件逻辑保持不变
}

// 原有默认导出保持不变
function mapStateToProps(state) {
  return {
    steps: appSelectors.steps(state),
  }
}
export const VerticalStepper = connect(mapStateToProps)(VerticalStepperComponent);

2. 测试用例直接导入原始组件，手动传入mock的steps参数：

import { VerticalStepperComponent } from './你的组件路径';

test('验证Property步骤正常渲染', () => {
  render(<VerticalStepperComponent 
    steps={['Property', 'Permit Holder']}
    activeStep={0}
    hidden={false}
  />);
  // 此时可正常定位到目标节点
  expect(screen.getByText(/Property/i)).toBeInTheDocument();
});

方案2：测试连接后组件，提供mock Redux store #

如果需要验证Redux绑定逻辑，可以给测试套上Provider并传入mock store：

1. 安装redux-mock-store依赖（已安装可跳过）
2. 测试用例写法如下：

import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import { VerticalStepper } from './你的组件路径';

const mockStore = configureStore([]);

test('验证Property步骤正常渲染', () => {
  // 构造和你真实state结构一致的mock数据，保证appSelectors.steps能拿到对应数组
  const store = mockStore({
    app: {
      steps: ['Property', 'Permit Holder']
    }
  });

  render(
    <Provider store={store}>
      <VerticalStepper activeStep={0} hidden={false} />
    </Provider>
  );

  expect(screen.getByText(/Property/i)).toBeInTheDocument();
});

额外检查项 #

• 确认组件的hidden属性没有被设置为true，否则StepperWrapper会被隐藏
• 确认activeStep传入了有效值，部分MUI Stepper版本不会渲染索引大于activeStep的步骤

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