工具提示MUI和React测试库

如何解决工具提示MUI和React测试库

我正在尝试在我的react应用程序上测试Info HOC：

const InfoHOC = (HocComponent) => ({ message }) => (
  <>
    <Tooltip title={message}>
      <InfoIcon />
    </Tooltip>
    {HocComponent}
  </>
);

export default InfoHOC;

我已经简化了。但是由于它使用的是材料ui Tooltip组件，所以我无法测试鼠标悬停时是否显示消息...

it('should display info message on <div /> mouseover',() => {
  const Component = InfoHoc(<div>jest div</div>)({ message: 'jest infoHoc message' });
  const { getByTitle,getByDisplayValue } = render(Component);
  const icon = getByTitle('jest infoHoc message');
  act(() => {
    fireEvent(
      icon,new MouseEvent('mouseover',{
        bubbles: true,}),);
  });
  expect(getByDisplayValue('jest infoHoc message')).toBeInTheDocument();
});

我的最后一行是错误的...我认为这是因为mui工具提示在主体末尾的div中显示消息，所以不是真的在我的rtl树中...但是，该树的第一个元素是body！我知道我不应该测试mui组件，但这不是目的，我只是想确保InfoHoc使用mui工具提示或其他方法具有正确的口感。

这是鼠标悬停后的RTL树：

<body>
  <div>
    <div
      class="infoHoc"
    >
      <div>
        jest div
      </div>
      <svg
        aria-hidden="true"
        class="MuiSvgIcon-root icon--right"
        focusable="false"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
        />
      </svg>
    </div>
  </div>
</body>

该事件很好，因为图标具有标题属性，并带有消息作为值，直到触发鼠标悬停为止。由于标题属性不在我的树上，因此我认为我的事件执行良好； p

我测试错了吗？如果不是，您有解决我问题的想法吗？

谢谢大家！

解决方法

如果这仍然可以帮助您，您需要使用 findBy 而不是 getBy，因为 Tooltip 显示的是工具提示 after a delay

it('should display info message on <div /> mouseover',async () => {
  const Component = InfoHoc(<div>jest div</div>)({ message: 'jest infoHoc message' });
  const { getByTitle,findByDisplayValue } = render(Component);
  const icon = getByTitle('jest infoHoc message');

  act(() => {
    fireEvent(
      icon,new MouseEvent('mouseover',{
        bubbles: true,}),);
  });

  // Wait for the tooltip to show up
  const tooltipText = await findByDisplayValue('jest infoHoc message')

  expect(tooltipText).toBeInTheDocument();
});

旁注 1：我不确定您是否真的需要 act 周围的 fireEvent。测试库应该为你做。

旁注 2：您可以使用 user-event，它具有更清晰的语法（和 .hover 函数）

工具提示MUI和React测试库

如何解决工具提示MUI和React测试库

解决方法

相关推荐