小编Dom*_*ede的帖子

我正在使用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 …

我试图使用高阶组件(HOC)模式重用一些连接到状态的代码并使用Redux Form formValueSelector方法.

formValueSelector需要一个引用表单名称的sting.我想动态设置它,并且只要我需要项目的值就可以使用这个HOC.我使用项目值进行计算.

在下面的代码中,HOC传递了组件和一个字符串.我想将它设置为从父(表单)传入的prop formName.

我是HOC模式的新手,所以任何提示都会非常受欢迎.

HOC

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';

function FormItemsValueSelectorHOC(FormElement, formName) {
  const selector = formValueSelector(formName);
  @connect(state => {
    console.log(state);
    const items = selector(state, 'items');
    return {
      items
    };
  }, null)
  class Base extends Component {
    render() {
      return (
        <FormElement {...this.props} />
      );
    }
  }
  return Base;
}
export default FormItemsValueSelectorHOC;

包裹的组件

import React, { Component, PropTypes } from 'react'; …