Установить размер окна в 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