How to check reactive components with an enzyme?

Question

I am using the React-Reponsive library. https://github.com/contra/react-responsive

I'm struggling to figure out how to test the components that are embedded in the response request-response request request 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);
  });
}

Test result:

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

The relevant part of console.log output is:

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

Indicates that the title does not really appear in the render tree. However, if I remove MediaQuery and make the title a direct child of AppContainer, the test passes.

I assume this is not a mistake, as I am very new to Enzyme and testing components in general. Any help or examples would be appreciated.

: , , . , .

Answer 1

, Media Query window.matchMedia, jsdom undefined.

. , .

- DOM.

window.testMediaQueryValues = {width:740};

MediaQuery , :

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

, , , .

@Contra -

Answer 2

- unit test. Webpack, inject-loader . "-" , .

:

import YourComponentInjector from 'inject-loader!../YourComponent.jsx';

class MediaQueryDesktopMock extends React.Component {
    render() {
      const {minDeviceWidth, children} = this.props;
      if(minDeviceWidth === 765) {
        return (<div>{children}</div>)
      }
      return <span/>;
    }
  }
  let YourComponentMock = YourComponentInjector({
    'react-responsive': MediaQueryDesktopMock
  });