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

Question

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

我有一个侧边栏，当屏幕尺寸小于或等于 1024px 时，它会向左过渡并消失。我经历了这个 -弄清楚如何模拟反应组件测试stackoverflow 问题的窗口大小更改以模拟/模拟屏幕调整大小。然后我尝试使用像 getComputedStyle 这样的 DOM 函数来查看是否将过渡的 css 规则应用于侧边栏。但是我找不到我应用的转换规则。当我选择侧边栏，将其存储为全局元素并在浏览器控制台中对其执行 getComputedStyle 时，它​​起作用了。我究竟做错了什么？

测试文件

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是我在里面写的Component，里面用到了材质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是返回一个空数组。所以我参考了这个stackoverflow question并{ attachTo: document.body }在mount中添加了选项。我可以检索 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 时，它给出了一个空字符串。