我正在使用React-Reponsive库.
https://github.com/contra/react-responsive
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和一般的测试组件都很新.任何帮助或示例将不胜感激.
请注意:我对此组件的其他测试正在通过.我相信进口和设置都是正确的.
问题是Media Query正在寻找与jsdom未定义的window.matchMedia.
在这种情况下,我需要使用服务器端呈现实现.然而,这将需要宽度的静态值,这会破坏响应性.
我的解决方案是在测试虚拟DOM上设置一个全局变量.
window.testMediaQueryValues = {width:740};
然后MediaQuery可以访问它们,如果它们在那里:
<MediaQuery maxWidth={smallViewMaxWidth} values={window.testMediaQueryValues}>
在未设置变量的情况下,将忽略空值,并且组件将照常渲染.
非常感谢@Contra的帮助和超级图书馆
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。