How do I test React-Responsive components with Enzyme?

Question

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

I am struggling to figure out how to test components that are nested in 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);
  });
}

The 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 the output of the console.log is:

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

Indicating that Header is indeed not appearing in the render tree. However if I remove the MediaQuery and make Header a direct child of AppContainer the test passes.

I imagine this is not a bug as I'm very new to Enzyme and testing components in general. Any help or examples would be appreciated.

Please note: The other tests I have on this component are passing fine. I am confident that the imports and setup are all correct.

Answer 1

Issue was that Media Query is looking for window.matchMedia which with jsdom is undefined.

In this case I needed to use the Server Side Rendering implementation. However this would require a static value for width, which breaks the responsiveness.

My solution is to set a global variable on the test virtual DOM.

window.testMediaQueryValues = {width:740};

Then MediaQuery can access them if they are there:

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

In the case when the variable is not set, the null values are ignored and the Component renders as usual.

Big thanks to @Contra for his help and super library

Answer 2

What worked for me was adding a mocked react-responsive component using a __mocks__ directory. Basically create the following file in the directory structure:

-your-component

--component-using-media-query.js

--__mocks__

---react-responsive.js

Then you can mock out the MediaQuery component in the react-responsive.js file.

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

export default MediaQuery;