[Unit Test] How do you mock a react component with Jest?

jest enzyme test unit component

How do you mock a react component with Jest?

We got a component which is included another external components InstallCom and UserCom (github):

import { InstallCom } from 'installComponent'
import UserCom from 'userComponent'
export class ShareCom extends Component {
   render() {
      return (
         <div>
            <InstallCom para1='title1'/>
            <UserCom para2='title2' />
         </div>
      )
   }
}

Unit Test

In unit test, what we care about is the functionality of <ShareCom />, but not other dependent components InstallCom and UserCom, for mock purpose , jest is a good helper.

import {ShareCom} from '../somewhere/ShareCom'
jest.mock('../somewhere/UserCom', () => ()=> <div id="mockUserCom">
   mockUserCom
</div>)
jest.mock('installComponent', () => ({
   InstallCom: 'mockInstallCom'
}))

describe('ShareCom', () => {
   it('should return correct component', () => {
      const wrapper = mount(
         <ShareCom 
            something={something}
         />
      )

      expect(wrapper.find('mockInstallCom').length).toEqual(1)
      expect(wrapper.find('#mockUserCom').length).toEqual(1)
   })
})

Reference:

— Git: https://gist.github.com/wahengchang/108ca55981f6600c252ad0cb9d4c518f