Блог

Что делает приведенный ниже код, так это создает промежуток с определенными размерами и положением (предлагаемый getBoundingClientRect), когда мышь наведена на lt;agt; тег, и это отлично работает

  lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;titlegt;ollow Along Navlt;/titlegt;  lt;link rel="stylesheet" href="style.css"gt; lt;/headgt; lt;bodygt;   lt;navgt;  lt;ul class="menu"gt;  lt;ligt;lt;a href=""gt;Homelt;/agt;lt;/ligt;    lt;/ulgt;  lt;/navgt;   lt;div class="wrapper"gt;  lt;pgt;Lorem ipsum dolor sit amet, lt;a href=""gt;consecteturlt;/agt; adipisicing elit. Est lt;a href=""gt;explicabolt;/agt; unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!lt;/pgt;  lt;pgt;Aspernatur sapiente quae sint lt;a href=""gt;solutalt;/agt; modi, atque praesentium laborum pariatur earum lt;a href=""gt;quaeratlt;/agt; cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.lt;/pgt;  lt;/divgt;  lt;scriptgt;  const triggers = document.querySelectorAll('a');  const highlight = document.createElement('span');  highlight.classList.add('highlight');  document.body.appendChild(highlight);   function highlightLink(a) {  const linkCoords = a.getBoundingClientRect();  const coords = {  width: linkCoords.width,  height: linkCoords.height,  top: linkCoords.top   window.scrollY,  left: linkCoords.left   window.scrollX  };   highlight.style.width = `${coords.width}px`;  highlight.style.height = `${coords.height}px`;  highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;   }   triggers.forEach(a =gt; highlightLink(a));  lt;/scriptgt; lt;/bodygt; lt;/htmlgt;   

Я хотел создать модульное тестирование для приведенного выше кода в теге script, поэтому я придумал этот сценарий на основе NodeJS

 const index = require('./index.js'); //runs the html in express app   var jsdom = require('jsdom'); const { JSDOM } = jsdom; const { document } = (new JSDOM('')).window; global.document = document;  const test =async()=gt;{   const request = require('supertest');  const response = await request(index).get("/");    document.body.innerHTML = response.text;  const triggers = document.querySelectorAll('a')  var highlight = document.createElement('span'); highlight.classList.add('highlight'); document.body.appendChild(highlight);     function checkThis(a) {    const linkCoords = a.getBoundingClientRect();  console.log(linkCoords.width)   }  triggers.forEach(a =gt; checkThis(a)); }     test()  

По какой-то причине я получаю нулевую ширину для всех lt;agt; тегов. Даже другие свойства от getBoundingClientRect равны нулю. Каковы могут быть возможные причины этого?. И каков будет лучший способ протестировать этот код с помощью Jest и Супертеста?

Убедитесь, что ДОМ готов. Перед привязкой событий или доступом к элементам. Кроме того, вы всегда будете получать нули, если у элемента, к которому вы пытаетесь получить доступ, есть display:none .

Чтобы проверить, не проблема ли в том, что DOM загружается слишком поздно, просто зарегистрируйте переменную triggers и посмотрите, имеет ли она правильные значения, если нет, вы можете сделать это:

 document.addEventListener('DOMContentLoaded', (event) =gt; {  // put code that needs to wait for DOM to load here })