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

Question

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

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

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={{...}} />

表明 Header 确实没有出现在渲染树中。但是，如果我删除 MediaQuery 并使 Header 成为 AppContainer 的直接子级，则测试通过。

我认为这不是一个错误，因为我对 enzyme 和一般测试组件非常陌生。任何帮助或示例将不胜感激。

请注意:我对此组件的其他测试都通过得很好。我确信导入和设置都是正确的。

Answer 1

问题是媒体查询正在寻找 window.matchMedia，而 jsdom 未定义该窗口。

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

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

window.testMediaQueryValues = {width:740};

然后 MediaQuery 可以访问它们(如果存在):

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

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

非常感谢@Contra的帮助和 super 库