引用其他组件时测试样式组件答案

【问题标题】：Testing styled-components when referencing to other component引用其他组件时测试样式组件
【发布时间】：2020-09-29 15:16:42
【问题描述】：

我在尝试测试使用样式组件制作的组件时遇到问题。

所以我有两个组件，如果我将鼠标悬停在第一个元素上，我试图让第二个组件的背景颜色发生变化。

我的组件：

const Container = styled.div``

const Label = styled.label`
     ${Container}:hover & {
            background-color: red;
     }
`

每当我尝试用开玩笑的expect(label).toHaveStyle() 测试标签组件时，它总是会抛出一个错误，上面写着TypeError: Cannot read property 'parentElement' of null。但是当我在标签中评论对容器组件的引用时，测试通过了。有人可以帮忙吗？非常感谢。

我正在使用 react-testing-library 在我的测试文件中呈现我的组件。

【问题讨论】：

请提供有关您如何在测试文件中呈现组件的更多信息。

标签： reactjs jestjs styled-components

【解决方案1】：

在沙盒中重写代码，一切正常?。也许我在我的项目中做了错误的实现。感谢您的帮助！

沙盒链接：https://codesandbox.io/s/nervous-hodgkin-irruc?file=/src/App.js

【讨论】：