Javascript Vue Jest测试一个元素'；s内联样式

如何在Vuejs+Jest测试中获取html元素的样式属性？

使用

jest

和

@vue/test utils

测试textarea元素是否在Vuejs中应用了

颜色

内联样式

我在textarea上设置了

ref

，检查textarea存在性及其值的测试成功，但未能从元素的样式中获取

color

属性

下面是我的组件和测试代码：

从“./包括/Post”导入Post；
从“~/components/Posts/Includes/QuestionCard”导入问题卡；
从~/classes/FeedPost'导入{FeedPost}；
导出默认值{
名称：“SingleItemPost”，
组成部分：{
邮递
问题卡，
},
道具：{
职位：{
类型：馈电线杆，
要求：正确，
},
},
};

从'@vue/test-utils'导入{Wrapper，shallowMount}；
从“../QuestionPost.vue”导入QuestionPost；
从~/classes/FeedPost'导入{FeedPost}；
Wrapper.prototype.ref=函数（id）{
返回this.find（{ref:id}）；
};
描述（'QuestionPost'，（）=>{
让包装纸；
让邮政；
常量文本='text'；
常量颜色='color'；
在每个之前（（）=>{
接线柱=新接线柱({
文本，
颜色
键入：“问题帖子”，
});
包装=浅装（问题贴{
propsData：{
邮递
},
});
});
它（'应该呈现正确的元素'，（）=>{
expect（wrapper.ref（'questioncard'）.exists（））.toBe（true）；//确定
expect（wrapper.ref（'posttext'）.exists（））.toBe（true）；//确定
});
它（'应该有正确的值和样式'，（）=>{
const textarea=wrapper.ref（'posttext'）；
expect（textarea.element.value）.toBe（text）；//确定
expect（textarea.element.style.getPropertyValue（'color'））.toBe（color）；//失败
});
});

我也尝试了

textarea.element.style.color

，但都是一样的

测试结果：

Expected: "color"
Received: ""

---

那么如何获取textarea元素的

颜色呢？
这是因为测试设置了无效的颜色值（即，
“color”
不是
颜色
样式的有效值），所以设置被静默拒绝

要解决此问题，请选择一个有效值（例如，
“red”
或
“090”
）。
出现这种情况是因为测试设置的颜色值无效（即，
“color”
不是
颜色
样式的有效值），因此该设置会被静默拒绝

若要解决此问题，请选择一个有效值（例如，
“red”
或
“(090”
）。
您可以控制台记录textarea对象并发布结果吗？可能是
textarea.style.color
将其添加到了问题中。您可以控制台记录textarea对象并发布结果吗？可能是
textarea.style.color
将其添加到了问题中