如何使用酶测试React-Responsive组件？

Question

我正在使用React-Reponsive库. https://github.com/contra/react-responsive

我正在努力弄清楚如何测试嵌套在React-Responsive Media Query Components中的组件:

export default class AppContainer extends React.Component {
  render(){
    return(
      <MediaQuery minDeviceWidth={750}>
         <Header />
      </MediaQuery>
    );
  }
}

-

describe("AppContainer", () => {
  let App;
  let wrapper;
  beforeEach(() => {
    wrapper = mount(<Provider store={store}><AppContainer location={location} /></Provider>);
    App = wrapper.find(AppContainer);

  });
  it('to have a <Header /> component', () => { 
    console.log(App.debug());
    expect(App.find(Header)).to.have.length(1);
  });
}

测试结果:

1) AppContainer to have a <Header /> component:
AssertionError: expected { Object (component, root, ...) } to have a length of 1 but got 0

console.log输出的相关部分是:

<MediaQuery minDeviceWidth={750} values={{...}} />

指示标题确实没有出现在渲染树中.但是,如果我删除MediaQuery并使Header成为AppContainer的直接子项,则测试通过.

我想这不是一个错误,因为我对Enzyme和一般的测试组件都很新.任何帮助或示例将不胜感激.

请注意:我对此组件的其他测试正在通过.我相信进口和设置都是正确的.

Answer 1

问题是 Media Query 正在寻找 window.matchMedia 与 jsdom 未定义。

在这种情况下，我需要使用服务器端渲染实现。然而，这需要宽度的静态值，这会破坏响应能力。

我的解决方案是在测试虚拟 DOM 上设置一个全局变量。

window.testMediaQueryValues = {width:740};

如果它们在那里，那么 MediaQuery 可以访问它们：

<MediaQuery maxWidth={smallViewMaxWidth} values={window.testMediaQueryValues}>

在未设置变量的情况下，将忽略空值并且组件照常呈现。

非常感谢@Contra 的帮助和超级图书馆