React - Jest Mock an inner component

Question

I have a component that has a child component. This child component has some rules to display its children content, and I want to mock it to display the content regardless its rules.

import MediaQuery from './component.media.query'
class Dumb extends Component {   render() {
    return (
      <Fragment>
        <div>Generic content</div>
        <MediaQuery device="DESKTOP">
          <div id="desktop">Specific desktop content</div>
        </MediaQuery>
      </Fragment>
    )   } }

I've tried some ways, and even the simplest is not working:

  describe('Dumb component', () => {
    jest.doMock('./component.media.query', () => {
      const Comp = () => <div id='desktop'>Mocked</div>
      return Comp
    })

    it('should display the desktop', () => {
      const wrapper = mount(<Dumb />)
      expect(wrapper.find('#desktop')).toExist()
    })
  })

Any ideas?

Answer 1

In your test you can mock it like this :

jest.mock('./component.media.query', () => () => 'MediaQuery') 
//note that you have to enter the path relative to the test file.

With enzyme you can find the element like this

wrapper.find('MediaQuery')