Блог

Я пытаюсь протестировать границу, которая будет иметь display:none место при изменении размера окна. Для этой цели я использую jest и react-testing-library.

У меня есть эти простые правила css для моего класса border

 .built-with .border{
  position: absolute;
  justify-self: center;
  height: 50%;
  border-left: 1px solid black;
  opacity: 0.5;
}
@media (max-width: 590px){
  .built-with .border{
    display: none;
  }
}
 

Я пытаюсь утверждать, что когда window.innerWidth значение меньше 500, тогда .border display должно быть none.
Вот что я пытаюсь сделать:

 import {render} from '@testing-library/react';
it("should have styles on different viewports", () => {
        const { container } = render(<Footer />);
        const border = container.querySelector('.border');

        const style1 = window.getComputedStyle(border);
        window = { ...window, innerWidth: 500, innerHeight: 700 };

        console.log(window.innerWidth); // 500

        const style2 = window.getComputedStyle(border);

        expect(style1.display).not.toMatch(style2.display); 
        /*expected - to not match
          during test - it matches
        */
    });
 

Здесь : style1 имеет значение по умолчанию window.innerWidth 1024 и style2 имеет window.innerWidth

Кажется, что таблицы стилей не отображаются в jsDOM .

Кент (автор библиотеки тестирования) обсудил эту проблему здесь

Вот почему для тестирования стилей CSS необходима настоящая браузерная среда. Тестирование стилей css во время сквозных тестов может быть наилучшим возможным способом.

Однако есть несколько способов протестировать библиотеки css-in-js или стилизованные компоненты.