Как проверить, что css медиа-запроса применяется к элементу при изменении размера экрана, используя jest и энзим в ReactionJS

Question

Я пытаюсь проверить работоспособность приложения, которое я создаю в реакции, используя шутки и энзимы.Как я могу это сделать?

У меня есть боковая панель, которая переходит влево и исчезает, когда размер экрана меньше или равен 1024 пикселей.Я прошел через это - Выяснил, как смоделировать изменение размера окна для теста реагирующего компонента stackoverflow вопрос для имитации / макета изменения размера экрана.Затем я попытался использовать функции DOM, такие как getComputedStyle, чтобы увидеть, применяется ли правило css для перехода к боковой панели.Но я не могу найти правило преобразования, которое применил.Когда я выбрал боковую панель, сохранил ее как глобальный элемент и сделал getComputedStyle поверх нее в консоли браузера, это сработало.Что я делаю не так?

test.ts

describe('App', () => {

  let mountedApp: any;
  const props: RouteComponentProps = {
   ...
  } as RouteComponentProps;

  const initialState = {
    ...
  };

  // Function that returns a new App mounted
  const newApp = ((route: string) => {
    if (!mountedApp) {
      props.location.pathname = route;
      mountedApp = mount(
        <MemoryRouter initialEntries={[route]}>
          <Provider store={configureStore([thunk])(initialState)}>
            <App {...props} />
          </Provider>
        </MemoryRouter>,
        { attachTo: document.body }
      );
    }
    return mountedApp;
  });

  it('Expect the side bar to disappear and menu icon to appear for smaller screen size', () => {
    const wrapper = newApp('/');
    let container = wrapper.find(NavDrawer).find(Drawer);
    expect(container.props().classes.paper).toEqual('nav-drawer-paper drawer-close');
    Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 1024});
    window.dispatchEvent(new Event('resize'));
    // expect(container.find(Drawer)).toHaveStyleRule('transform', 'translate3d(-240px, 0, 0)');
    let element = container.getDOMNode().children[0];
    let HTMLElement = document.getElementsByClassName('drawer-close')[0];
    console.log('dom element', window.getComputedStyle(HTMLElement));
    console.log('element style', window.getComputedStyle(element));
  });
});

NavDrawer - это компонент, который я написал, внутри которого я использовал компонент Drawer материала.К этому компоненту я применил стили.

NavDrawer.ts

class NavDrawer extends React.Component {
  render() {
    return (
      <Drawer
        className='nav-drawer'
        variant='permanent'
        anchor='left'
        classes={{paper: `nav-drawer-paper${this.props.isDrawerClose ? ' drawer-close' : ''}`}}
      >
        ...
        ...
      </Drawer>
    );
  }
}

Когда боковая панель исчезает, я показываю значок меню на верхней панели.Нажав на нее, пользователь может открыть или закрыть боковую панель на небольших экранах.this.props.isDrawerClose говорит, открыт ли ящик пользователем или нет.По умолчанию true.

style.less

.nav-drawer {
  width: 240px;
  z-index: 1295;
  flex-shrink: 0;
  .nav-drawer-paper {
    border-right-width: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    padding-top: 68px;
    width: 240px;
    transition: all 300ms ease;
    transform: translate3d(0, 0, 0);      
  }  
}

@media screen and (max-width: 1024px){
  .nav-drawer {
    .nav-drawer-paper {
      box-shadow: 0 0 10px rgba(51, 51, 51, 0.38);
    }
    .drawer-close {
      transition: all 300ms ease;
      transform: translate3d(-240px, 0, 0);
    }
  }
}

Я нашел что-то под названием toHaveStyleRule, но я не могу его использовать (выего можно увидеть в файле test.ts), потому что он выдает ошибку tslint Property 'toHaveStyleRule' does not exist on type 'Matchers<any>'

Я также пытался использовать web dom api для получения элемента и проверки стилей, как это делал в консоли браузера, но все еще нетза работой.Первоначально document.getElementsByClassName возвращал пустой массив.Поэтому я сослался на этот вопрос stackoverflow и добавил опцию { attachTo: document.body } в монтировании.Я мог получить элемент DOM, но не смог получить те же результаты, что и в браузере.

В браузере, вот что я сделал и получил.

Я сделал

ele = document.getElementsByClassName('drawer-close')[0]
window.getComputedStyle(ele).transform

, что дает "matrix(1, 0, 0, 1, 0, 0)"

После изменения размера экрана до 1024px, оно дает "matrix(1, 0, 0, 1, -240, 0)"

Я ожидал, что то же самое произойдет в браузере, но когда я утешил computerStyle.transform,он дал пустую строку.