Dynamic :style attribute is empty on vue-test

Viewed 32

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?

0 Answers
Related