React-TypeScript组件Props测试求助：react-testing-library返回null

问题根源 #

你的测试用例传入了varient={'big'}，但从给出的组件代码来看，只有当varient === 'small'时才会渲染带有data-testid="type"的<Typography>元素。big分支代码未提供，推测该分支内没有对应testid的DOM元素，导致screen.queryByTestId("type")返回null。

另外原测试的断言逻辑也有误：你期望该元素等于'temperature'，但实际上这个元素的内容是{value} + 对应单位（比如传入value={0}和type='temperature'时，文本是0 °C），并非直接显示temperature字符串。

修复方案 #

方案1：调整测试用例的varient参数

将测试中的varient改为'small'，确保渲染出带有目标testid的元素，同时修正断言逻辑：

describe('SharedDashboardUiLatestValueWidget', () => {
  it('should render props correctly for small variant', ()=>{
    render(<SharedDashboardUiLatestValueWidget 
      value={0} 
      type={'temperature'} 
      varient={'small'} 
      valueColor={''} 
    />);
    const typeElement = screen.getByTestId("type");
    // 验证温度单位是否正确渲染
    expect(typeElement).toHaveTextContent('0 °C');
  })
});

方案2：为big分支添加对应testid

如果需要测试big变体的组件，需在组件的big分支代码中，给显示数值和单位的<Typography>元素也加上data-testid="type"，之后再编写对应测试用例。

额外提示

• 优先使用getByTestId而非queryByTestId：当确定元素应该存在时，getByTestId会在元素不存在时抛出明确错误，更利于调试；queryByTestId仅返回null，错误信息不够明确。
• 测试Props的核心是验证Props最终是否正确反映在UI上（比如文本、样式、结构），而非直接断言Prop值本身，这更符合react-testing-library的测试理念。

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