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

Question

今天下午，Out 团队在使用 Jest 为我们的<Avatar />组件编写 React 测试库 (RTL) 测试时遇到了一个场景。具体来说，我们想测试<img />标签是否在加载失败（onError被触发）以匹配预期的组件最终视图时从 DOM 中删除。出于某种原因，fireEvent在<img />DOM 元素上使用对我们来说并不是很明显，我们没有在网上找到这个明确的解决方案，所以我们想分享一下。可以想象，这也适用于其他事件onLoad。更多关于 RTL 事件。

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();
});

Answer 1

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

const image = getByRole('img')

fireEvent.load(image);

对于 onError

fireEvent.error(image)

Answer 2

解释

• <Avatar />使用默认道具渲染，在我们的例子中，包含一个<img />指向用户可选的个人资料图像端点的标签。
• 然后，我们fireEvent在该 DOM 元素上使用，触发onError当时绑定的函数，render模拟失败/404未设置用户头像的情况。
• 最后，我们现在可以期望<img />根据其中的逻辑删除<Avatar />