React Testing中toContainHTML识别已存在HTML元素报错如何解决？

问题原因 #

1. 测试代码中的断言语句参数错误：你给toContainHTML传入的是HTML实体编码的<strike>，不是实际的<strike>标签字符串，因此无法匹配到渲染结果里的真实strike元素。
2. toContainHTML本身属于较脆弱的断言方式，只要标签内出现额外属性、空格等微小差异，就可能导致匹配失败，不符合React Testing Library的最佳实践。

解决方法 #

快速修复

直接修改断言语句的参数为真实的标签字符串即可：

expect(todoElement).toContainHTML('<strike>')

更推荐的方案

通过DOM查询直接验证strike元素存在，断言更稳定，不会因为HTML结构的微小变动意外失败：

// 替换原来的toContainHTML断言
expect(todoElement.querySelector('strike')).toBeInTheDocument()

额外提示：strike标签已经在HTML5中被废弃，推荐使用语义化的<s>标签或者给元素添加text-decoration: line-through样式实现删除线效果。

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