storybook Interactions: errors showing on hover event when stepping through manually

ddarikpa  于 3个月前  发布在  其他
关注(0)|答案(2)|浏览(30)

描述bug

在执行Standard Fail Hover故事时,最后一个交互操作会抛出错误。
bug_fail-to-hover.mp4

重现步骤

  1. 在官方故事书中,导航到Interactions > AccountForm > Standard Fail Hover。
  2. 向后和向前移动几次。
deikduxw

deikduxw1#

看起来与UI的交互会导致工具提示被移除,这使得查询失败,因为它找不到预期的元素。不确定这里的解决方案会是什么。

kjthegm6

kjthegm62#

嘿,@MichaelArestad 我觉得我们可能会遇到这样的情况很多次!只是代码应该写得不同一些,这样它就会起作用。在使用testing-library时也会出现这种情况(例如使用get与find)。
我相信这可以像这样修复:

export const StandardFailHover: CSF3Story = {
  ...StandardPasswordFailed,
  play: async (context) => {
    const canvas = within(context.canvasElement);
    await StandardPasswordFailed.play(context);
    await waitFor(async () => {
-      await userEvent.hover(canvas.getByTestId('password-error-info'));
+      const hint = await canvas.findByTestId('password-error-info');
+      await userEvent.hover(hint);
    });
  },
};

相关问题