当前位置: 首页 > 知识库问答 >
问题:

在引用其他组件时测试样式化组件

边国安
2023-03-14

我有一个问题,试图测试与样式组件制成的组件。

因此,我有两个组件,如果我将鼠标悬停在第一个元素上,我试图改变第二个组件的背景色。

我的组件:

const Container = styled.div``

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

每当我尝试用jestexpect(label)测试标签组件时。toHaveStyle()它总是抛出一个错误,表示TypeError:无法读取null的属性“parentElement”。但是,当我在标签中注释对容器组件的引用时,测试通过了。有人能帮忙吗?非常感谢你。

我正在使用react测试库在测试文件中呈现组件。

暂时还没有答案

 类似资料:
  • 需要一些非常具体的包装器和例程。

  • 我正在开发一个带有样式组件的反应应用程序,我有一个组件“导航”。在这个组件中有更多的组件,如,等。Header例如是这样声明的: 问题是,我在不同的文件中有这个导航组件,对于所有文件,样式都很好,但现在我只想在其中一个文件中更改标题组件的背景色,它位于(?)导航组件。我该怎么做?我知道可以用const NewNav=styled(导航)之类的东西从导航组件更改样式,`但是标题呢? 先谢谢你。

  • 是一个装饰器函数,它将组件类的名称作为其输入,并在要绑定的包含组件的模板中找到其选择器。 也可以传递一个模板引用变量。 例如,我们将组件类Alert绑定到其选择器<my-alert>,并将其分配给属性alert。 这使我们能够访问类方法,如show()。 View Example 当模板中有多个嵌入式组件时,我们还可以使用。 它收集 Alert 组件的实例列表,存储在与数组类似的QueryList

  • Button组件通常由Text元素组成,该元素用TouchableHighlight(或其他touchable)包装。我正在尝试创建一个使用styled-components样式的按钮组件,但是我的样式很难动态响应道具。 下面,我创建了一个按钮组件,类似于样式化组件文档中的Adapting based on props示例。 导入后,我用的按钮是这样的... 所以,我希望我的纽扣看起来像这样...

  • 本文向大家介绍vue组件如何被其他项目引用,包括了vue组件如何被其他项目引用的使用技巧和注意事项,需要的朋友参考一下 自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用。本文就粗细的介绍下,如有疑问欢迎共同讨论。在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包,尤其是本地引用 3.vue组件的两种引用方案 一、发布一个包到np