[Unit Test] mock component

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(<ShareComsomething={something}/>)

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

})})

Reference:

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