I have a dynamic style attribute in my div.
<div class="image-container" :style="{ 'aspect-ratio': aspectRatioOverride || aspectRatio }">
Where aspectRatioOverride is a prop and aspectRatio is an empty data which can be set from API response. What they do doesn't really matter as the problem is in my tests.
The problem I have is that in my tests I am expecting my div to have style when I pass aspectRatioOverride prop or aspectRatio data value.
const wrapper = mount(MyComponent, {
propsData: {
aspectRatioOverride: "16/9"
},
data(){
return {
aspectRatio: ""
}
}
});
console.log(wrapper.html()) <---------- here I am getting the following response:
<div class="image-container"> <--------- where I am expecting style to be
I tried all possible variations, even hardcoding the aspect ratio in the component itself:
<div class="image-container" :style="{ 'aspect-ratio': 55 }">
Still getting an empty div in the tests
Neither the following works
<div class="image-container" style="aspect-ratio: 55">
But the interesting moment comes when I try different css property:
<div class="image-container" style="display: flex">
and here in my test I am getting the style
<div class="image-container" style="display: flex;">
Looks like vue-test util doesn't like the style to be kebab case?
Why is that?