Jest / Enzyme не ведет себя так, как приложение с отзывчивыми изменениями - PullRequest
Новая
       83

Jest / Enzyme не ведет себя так, как приложение с отзывчивыми изменениями

0 голосов
/ 06 августа 2020

у меня есть нижний колонтитул с элементом <p>, если он больше 576 пикселей, но он НЕ отображается (display: none), если меньше 576 пикселей.

Идеально работает в браузере.

Однако протестировать его с помощью Jest / Enzyme очень сложно.

У меня есть функция: 

const resizeWindow = (x, y) => {
  // @ts-ignore
  window.innerWidth = x;
  // @ts-ignore
  window.innerHeight = y;
  window.dispatchEvent(new Event('resize'));
};

Затем она вызывается в тесте: 

...test on desktop...

...test on mobile:-

it('should NOT show <p> tag if width < 576', () => {
   resizeWindow(300, 600);
   const numberOfPtags = mountedComponent.find('p').length;
   expect(numberOfPtags).toBe(0)
});

Но это всегда проходит как 1.

Даже если код сделает его display: none; с этими размерами.

Я нашел способ выхода из системы, и он имел его как display: block;, что странно, поскольку я использовал только inline и none.

Я также вышел из параметров window.innerWidth, и они вышли нормально, так что, очевидно, это их изменение.

Что мне здесь не хватает?

- ОБНОВЛЕНО -

снимок экрана тестов, показывающий global.innerWidth вместо окна, проверка ширины был определенно изменен, но тег

остался. Понятия не имею, что я делаю неправильно.

Думал, что это может быть проблема asyn c (например, ожидание изменения размера виртуального окна, установка setTimeout и ожидание внутри него ... Шутка полностью пропущена все вместе setTimeout

скрининг кода

...