如何在React Testing Library中等待onTransitionEnd触发？

原因分析 #

你的测试代码中虽然手动触发了transitionend事件，但传递的propertyName没有被React合成事件正确接收，导致监听器里的条件判断不成立，action函数未被调用。以下是几种可行的解决方案：

方案1：正确传递事件属性到合成事件 #

使用fireEvent.transitionEnd时，需要确保propertyName通过nativeEvent注入到事件对象中，React合成事件会代理原生事件的属性，这样监听器里的e.propertyName就能获取到正确值：

// index.rtl.test.tsx
fireEvent.transitionEnd(element, {
  nativeEvent: {
    propertyName: 'margin-left'
  }
});
expect(action).toHaveBeenCalled();

方案2：模拟真实过渡流程（推荐） #

手动触发事件容易忽略React事件系统细节，更可靠的方式是模拟真实样式变化，等待过渡自然完成：

// index.rtl.test.tsx
// 1. 初始化元素margin-left样式
element.style.marginLeft = '0px';
// 强制触发重绘，确保初始样式生效
await waitFor(() => element.offsetWidth);

// 2. 修改margin-left触发过渡
element.style.marginLeft = '100px';

// 3. 等待transitionend事件触发，断言action被调用
await waitFor(() => {
  expect(action).toHaveBeenCalled();
});

这种方式完全模拟真实用户场景下的过渡流程，避免了手动触发事件的兼容性问题。

方案3：用jest.spyOn辅助验证 #

如果需要确认监听器调用情况，可以先监听action函数，再检查调用状态：

// index.rtl.test.tsx
// 注意：需确保action可被访问，若为组件内函数需通过组件实例获取或导出
const actionSpy = jest.spyOn(module.exports, 'action'); 

// 触发过渡或事件后
await waitFor(() => {
  expect(actionSpy).toHaveBeenCalled();
});
actionSpy.mockRestore();

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