Реагировать - Шутить, издеваться над внутренним компонентом

Question

У меня есть компонент, который имеет дочерний компонент.У этого дочернего компонента есть некоторые правила для отображения его дочернего содержимого, и я хочу смоделировать его для отображения содержимого независимо от его правил.

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>
    )   } }

Я пробовал несколько способов, и даже самый простой не работает:

  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()
    })
  })

Есть идеи?

Answer 1

В своем тесте вы можете смоделировать это так:

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

С энзимом вы можете найти элемент, подобный этому

wrapper.find('MediaQuery')