问如何使用酶测试反应响应组件？
EN

Stack Overflow用户

提问于 2016-08-25 13:08:49

回答 4查看 8.2K关注 0票数 14

我使用的是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={{...}} />

指示标题确实没有出现在呈现树中。但是，如果我删除MediaQuery并将Header设置为AppContainer的直接子级，测试就会通过。

我想这不是一个bug，因为我对一般的酶和测试组件是非常陌生的。任何帮助或例子都将不胜感激。

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

reactjs

enzyme

回答 4

Stack Overflow用户

发布于 2016-08-26 01:58:22

问题是媒体查询正在寻找未定义的带有jsdom的window.matchMedia。

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

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

window.testMediaQueryValues = {width:740};

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

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

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

非常感谢@Contra的帮助和超级库

票数 5

Stack Overflow用户

发布于 2018-08-15 18:25:35

对我来说起作用的是使用__mocks__目录添加一个模拟的react-responsive组件。基本上在目录结构中创建如下文件：

-your-component

--component-using-media-query.js

--__mocks__

-react-responsive.js

然后，您可以模拟react-responsive.js文件中的MediaQuery组件。

const MediaQuery = ({ children }) => children;

export default MediaQuery;

票数 4

Stack Overflow用户

发布于 2019-08-05 16:42:55

我能够使用react-responsive v7.0.0使其工作。

给定：

<MediaQuery minDeviceWidth={750}>
  <Header />
</MediaQuery>

以下是工作原理：

import { Context as ResponsiveContext } from 'react-responsive'
import { mount } from 'enzyme'

const wrappingComponent = ResponsiveContext.Provider
const wrappingComponentProps = { value: { width: 750 } }
const mountProps = { wrappingComponent, wrappingComponentProps }

const wrapper = mount(<AppContainer />, mountProps)