使用 Jest 和 React 测试库测试 `img.onLoad`/`img.onError`

今天下午，我们的团队在使用 Jest 为我们的项目编写 React 测试库 (RTL) 测试时遇到了一个场景<Avatar />成分。具体来说，我们想测试<img />标签在加载失败时被从 DOM 中删除（onError被触发）以匹配组件的预期最终视图。由于某种原因，使用fireEvent on the <img />DOM 元素对我们来说并不是很明显，我们在网上没有找到这个明确的解决方案，所以我们想要分享。正如您可以想象的那样，这适用于其他事件，例如onLoad以及。有关 RTL 活动的更多信息 https://testing-library.com/docs/dom-testing-library/api-events.

it('should render with only initials when avatar image is NOT found', async() => {
  const { container } = render(<Avatar {...defaultMocks} />);
  const avatarImg = container.querySelector('img');

  expect(avatarImg).toBeInTheDocument();

  fireEvent(avatarImg, new Event('error'));

  expect(avatarImg).not.toBeInTheDocument();
});

使用 testId 或 role 获取图像，然后使用 fireEvent 调用onLoad or OnError分别作用

const image = getByRole('img')

fireEvent.load(image);

对于 onError

fireEvent.error(image)