在文档中找不到工具提示

Question

所以我在代码中使用 Salt Design System 的工具提示 https://www.saltdesignsystem.com/salt/components/tooltip/examples

我正在尝试使用 React 测试库编写测试。 但是当我触发按钮上的鼠标悬停事件时，我无法在文档中找到工具提示。 下面是我的组件代码和单元测试。 我可能做错了什么？

App.tsx

import { Button, Tooltip } from "@salt-ds/core";

function App() {
  return (
    <Tooltip content="hakuna matata">
      <Button>Click me</Button>
    </Tooltip>
  );
}
export default App;

应用程序.spec.tsx

import {
  act,
  fireEvent,
  render,
  screen,
  waitFor,
} from "@testing-library/react";
import App from "./App";
import userEvent from "@testing-library/user-event";

describe("App", () => {
  it("should open tooltip", async () => {
    render(<App />);
    const btn = screen.getByText("Click me");
    expect(btn).toBeInTheDocument();
    fireEvent.mouseOver(btn);
    expect(await screen.findByText("hakuna matata")).toBeInTheDocument();
  });
});

更新

我在检查元素中注意到的一件事是工具提示有点像根元素外部的门户

Answer 1

看起来工具提示也有一个图标。因此，根据实际工具提示的呈现方式，您可能必须将

{exact: false}

选项添加到

byText

查询中。默认情况下，

getByText

尝试匹配元素的整个文本内容。

尝试使用

expect(await screen.findByText("hakuna matata", {
  exact: false
})).toBeInTheDocument();

查看文本匹配选项