Установить размер окна в Jest и Jest-DOM и JSDOM

Question

Я проверяю высоту окна в Jest с помощью jest-dom и jsdom.

С этим кодом:

import '@testing-library/jest-dom'

describe('test window height'), () => {
  test('test the height'), () => {
    expect(window.innerHeight).toBe(150) // 150 is an arbitrary value for testing the test ! 
   }) 
 }) 

В результате выдается сообщение об ошибке:

Ожидается: 150

Получено: 768

При использовании innerWidth полученное значение составляет 1024

Это здорово, это означает, что размер окна можно проверить с помощью Jest и jest-dom.

Но откуда взялись 768 и 1024? Это значения по умолчанию и всегда будет? Это настраивается и как?

Answer 1

768 и 1024 - это значение по умолчанию, Jest настраивает jsdom для вашего теста с помощью.

Вы можете перезаписать window.innerHeight в своем тесте. Но TypeScript говорит «нет», потому что window является неписываемым элементом.

Для меня Object.defineProperty работает как положено с TypeScript.

Так что с JEST этот тест должен пройти зеленый:

describe('test window height', () => {
  it('test the height',
    () => {
      Object.defineProperty(window, 'innerHeight', {
        writable: true,
        configurable: true,
        value: 150,
      });

      window.dispatchEvent(new Event('resize'));

      expect(window.innerHeight).toBe(150);
    });
});

Пример использования Object.defineProperty с TS, найденный здесь: Как проверить, что медиазапрос css применяется к элементу при изменении размера экрана, используя jest и фермент в reactjs