I have a requirement where I have created HTML bootstrap modal as responsive based on screen resolution and for that, I have used percentage as a unit while setting height/width like below:

<div id="main-popup" class="modal" style="width:500px;height:450px;'>
  <div class="modal-dialog">
    <div class="modal-header" style="width:100%;height:5%"></div>
    <div class="modal-body" style="width:100%;height:90%">
        <div class="left" style="width:25%"></div>
        <div class="right" style="width:75%">
          <table table-hgight="430">
            ....
          </table>
        </div>
    </div>
    <div class="modal-footer" style="width:100%;height:5%"></div>
  </div>
</div>

To make this above popup responsive, I have added the below code in javascript:

$("#main-popup).css('width', '80%');
$("#main-popup).css('height', '75%');
$("#main-popup table").attr("table-height", $("#main-popup).height() * 0.9);

This works perfectly in the application, but in jest testing when I tried to get the actual height/width of those modal elements it's always returning 0. Not sure what I'm missing here.