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

React-嘲笑内部组件

1 个答案: