React Testing Library查询更新后DOM无法获取新增invalid类名问题

问题原因 #

你遇到的问题是多个原因共同导致的，既有API未生效导致DOM不更新的问题，也有测试查询逻辑错误的问题：

• 你还没有对按钮触发的API做mock，真实API调用要么失败要么没有返回你预设的校验结果，不会触发后续给列表项加invalid类的逻辑
• 你传给BatchList的setBatchNumbers是空实现，就算API返回了正确结果，也没办法更新组件状态，DOM自然不会变化
• getBy*系列是同步查询方法，即使加了await也不会等待异步操作（比如API请求、状态更新）完成，你在点击按钮后立刻查询列表项，此时API请求还没跑完，类名还没加上，自然打印不到invalid类

修复方案 #

1. 先mock你的API调用，用预设的2个有效、2个无效的批次号结果作为返回值
2. 替换空的setBatchNumbers实现，你可以在测试用例中声明状态再传入组件，保证状态能正常更新：

const renderBatchListWithNumbers = () => {
  const [batchNumbers, setBatchNumbers] = useState([
    { BATCH_ID: '987654', ID: '78' },
    { BATCH_ID: '261010', ID: '79' },
    { BATCH_ID: '301967', ID: '80' },
    { BATCH_ID: '445566', ID: '81' },
  ])
  render(
    <AlertProvider template={AlertMUITemplate}>
      <BatchList
        formulaID={''}
        orderID={''}
        itemID={''}
        formulaResults={[]}
        batchNumbers={batchNumbers}
        setBatchNumbers={setBatchNumbers}
        batchNumber={'5'}
        setBatchNumber={() => {}}
      />
    </AlertProvider>
  )
}

3. 调整测试中的查询逻辑，用支持异步等待的findBy*方法，或者用waitFor包裹查询逻辑，等状态更新完成后再读取DOM：

test('clicking yes and passing back only 2 valid batch numbers should show 2 valid, 2 invalid batch numbers in list', async () => {
  renderBatchListWithNumbers();
  fireEvent.click(screen.getByText('Complete'));
  fireEvent.click(screen.getByText('Yes'));

  // 等待列表更新完成再查询元素
  const batchList = await screen.findByRole('list', { name: 'Batch Numbers' });
  const invalidItems = await within(batchList).findAllByRole('listitem', {
    className: 'invalid'
  });
  // 验证无效条目数量符合预期
  expect(invalidItems).toHaveLength(2);

  // 如果要打印类名确认，包在waitFor里保证状态已更新
  await waitFor(() => {
    const allItems = within(batchList).getAllByRole('listitem');
    allItems.forEach(li => console.log(li.className));
  })
});

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