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

Question

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

У меня есть боковая панель, которая переходит влево и исчезает, когда размер экрана меньше или равен 1024px. Я прошел через это - выяснил, как смоделировать изменение размера окна для вопроса об остаточном потоке в тесте реагирующего компонента, чтобы смоделировать / смоделировать изменение размера экрана. Затем я попытался использовать функции 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 - это Компонент, который я написал внутри, и я использовал материал DrawI. К этому компоненту я применил стили.

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 возвращал пустой массив. Поэтому я сослался на этот вопрос stackru и добавил { attachTo: document.body } вариант в креплении. Я мог бы получить элемент DOM, но не смог получить те же результаты, что и в браузере.

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

я сделал

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

который дал "matrix(1, 0, 0, 1, 0, 0)"

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

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