React - Jest Mock 内部组件

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