如何在reactjs中使用jest和enzyme来测试媒体查询CSS是否适用于屏幕调整大小时的元素

我正在尝试使用笑话和酶来测试我在reactjs中构建的应用程序的响应能力。我怎样才能做到这一点？

我有一个侧边栏，当屏幕尺寸小于或等于 1024px 时，侧边栏会向左过渡并消失。我经历过这个——弄清楚如何模拟反应组件测试的窗口大小变化 https://stackoverflow.com/questions/45868042/figuring-out-how-to-mock-the-window-size-changing-for-a-react-component-teststackoverflow 问题来模拟/模拟屏幕大小调整。然后我尝试使用 getComputedStyle 等 DOM 函数来查看过渡的 css 规则是否应用于侧栏。但我找不到我应用的变换规则。当我选择侧边栏，将其存储为全局元素并在浏览器控制台中对其执行 getCompulatedStyle 时，它​​起作用了。我究竟做错了什么？

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是我编写的组件，里面使用了material ui 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默认情况下。

无风格

.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返回一个空数组。所以我提到this https://stackoverflow.com/questions/43694975/jest-enzyme-using-mount-document-getelementbyid-returns-null-on-componenstackoverflow 问题并添加{ attachTo: document.body }安装中的选项。我可以检索 DOM 元素，但无法获得与浏览器中相同的结果。

在浏览器中，以下是我所做的和得到的。

I did

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 时，它给出了一个空字符串。