Question

今天下午，Out团队遇到了一个场景，当时用Jest为我们的<Avatar />组件编写了一个React Testing Library（RTL）测试。具体来说，我们想测试<img />标签在加载失败（触发onError）时是否已从DOM中删除，以匹配预期的组件最终视图。由于某些原因，在fireEvent DOM元素上使用<img />对我们来说并不是立即显而易见的，而且我们没有在线找到这种明确的解决方案，因此我们希望共享。可以想象，这也适用于其他事件，例如onLoad。 More about RTL 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();
});

Answer 1

说明

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

Answer 2

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

const image = getByRole('img')

fireEvent.load(image);

对于 onError

fireEvent.error(image)

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

2 个答案:

说明