React Testing Library条件渲染测试报错：无法匹配指定data-testid元素

组件代码 #

<div>
  {ranking?.map((player, index) => (
    <div key={ index }>
      <img src={ `https://www.gravatar.com/avatar/${player.picture}` } alt="player" />
      <h2 data-testid={ `player-name-${index}` }>{player.name}</h2>
      <h2 data-testid={ `player-score-${index}` }>{player.score}</h2>
    </div>
  ))}
</div>

测试代码 #

const playerInfo = [
  { name: 'Player 1', score: 10, img: 'player1.png' },
  { name: 'Player 2', score: 5, img: 'player2.png' },
  { name: 'Player 3', score: 15, img: 'player3.png' },
];
localStorage.setItem('ranking', JSON.stringify(playerInfo));

renderWithRouterAndRedux(<Ranking />);
const playerNames = screen.getAllByTestId(/player-name-\d+/g).map((elem) => elem.textContent);
const playerScores = screen.getAllByTestId(/player-score-\d+/g).map((elem) => Number(elem.textContent));

expect(playerNames).toEqual(['Player 3', 'Player 1', 'Player 2']);
expect(playerScores).toEqual([15, 10, 5]);

报错信息 #

TestingLibraryElementError: 无法找到匹配选择器 [data-testid="/player-name-\d+/g"] 的元素

问题排查与修复 #

• 字段不匹配：组件里用player.picture渲染图片，但测试数据里给的是img字段，直接导致组件无法正确识别数据，跳过渲染。把测试数据的img改成picture：

  const playerInfo = [
    { name: 'Player 1', score: 10, picture: 'player1.png' },
    { name: 'Player 2', score: 5, picture: 'player2.png' },
    { name: 'Player 3', score: 15, picture: 'player3.png' },
  ];
  

• 异步加载时机：如果组件是通过useEffect读取localStorage并更新状态，测试时要等组件完成状态更新，用waitFor包裹断言：

  await waitFor(() => {
    const playerNames = screen.getAllByTestId(/player-name-\d+/g).map(elem => elem.textContent);
    expect(playerNames).toEqual(['Player 3', 'Player 1', 'Player 2']);
  });
  

• 排序逻辑缺失：断言里期望玩家按分数从高到低排序，但测试数据是未排序的，要么在组件内给ranking加排序逻辑，要么在测试里提前排好数据：

  // 组件内添加排序
  {ranking?.sort((a,b) => b.score - a.score).map((player, index) => (...))}
  

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