测试Material UI Button时.text()返回'<Button />'而非按钮文本的问题

核心原因 #

1. 大概率是你使用了Enzyme的**浅渲染（shallow render）**执行测试：浅渲染仅会渲染当前被测组件的第一层节点，不会递归渲染内部的子组件。Material UI的Button属于第三方子组件，在浅渲染结果中只会以组件占位节点的形式存在，不会被渲染为真实的DOM元素，此时调用text()方法只能拿到组件占位符<Button />，无法获取内部的文本内容。
2. 次要可能性：你测试代码中导入的Button组件，和被测业务代码内导入的Button不是同一个引用。比如一方导入的是@mui/material/Button，另一方导入的是二次封装后的Button组件，或是导入方式（默认导出/具名导出）不匹配，导致find(Button)没有匹配到正确的节点。

对应解决方案 #

• 如果你要继续使用浅渲染：可以调用dive()方法向下渲染一层Button组件，再获取文本：

  expect(wrapper.find(Button).dive().text()).to.equal("Edit");
  

  也可以直接匹配渲染后的DOM标签查询：

  expect(wrapper.find('button').text()).to.equal("Edit");
  

• 改用全渲染（mount）执行测试：全渲染会递归渲染所有子组件为真实DOM，直接执行原断言即可拿到正确结果。
• 检查测试代码和业务代码中Button的导入路径、导入方式是否完全一致，确保组件引用匹配。

内容的提问来源于stack exchange，提问作者mrwnt10