Peter Chang

@peterchang_82818

[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(
<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

More by Peter Chang

Topics of interest

More Related Stories