Jest & material-ui：如何测试特定图标的存在？

Question

我最近将一个应用程序迁移到了我喜欢的 mui v4。

还完成了更新我们使用 jest/enzyme 运行的测试套件。例如，我现在赞成mount而不是shallow.

一个问题是我找不到测试图标存在的方法。

在撰写本文时，我正在使用所有最新版本的 material-ui、react 和工具，例如 jest/enzyme 等

---

在 MUI 源代码中，我在规范文件中看到了这样的内容：

wrapper.find('svg[data-mui-test="KeyboardArrowLeftIcon"]'

这是在createSvgIcon源中这个道具是如何声明的：

<SvgIcon {...props} data-mui-test={`${displayName}Icon`} ref={ref}>

但是，我data-mui-test在我自己的node_modules文件中找不到对该道具的任何引用@material-ui/icons/utils/createSvgIcon.js：

<SvgIcon {...props} data-mui-test={`${displayName}Icon`} ref={ref}>

而且，事实上，wrapper.debug()在测试中表明 DOM 中不存在该道具：

[...]
<svg 
  className="MuiSvgIcon-root" 
  focusable="false" 
  viewBox="0 0 24 24" 
  color={[undefined]} 
  aria-hidden="true" 
  role="presentation">
[...]

---

问题

1. 为什么data-mui-test从生成的 npm 模块代码中删除了 prop？
2. 这仍然是测试图标存在的正确方法吗？（正如 mui 团队成员所建议的那样）

Answer 1

data-testid 的标准测试技术适用于这些图标，即：

<Warning color="warning" data-testid="warning-icon" />

然后在你的测试中

expect(documentBody.getByTestId('warning-icon')).toBeInTheDocument();