reactjs - 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.

用 enzyme 你可以找到这样的元素

wrapper.find('MediaQuery')