Mocking children components with Jest - does this make sense?

icon.js

import React from 'react'

export default class Icon extends React.Component {

  render () {
    const {type, className} = this.props
    return (
      <i 
        className={`fa fa-${type} fa-fw ${className}`}
        {...this.props}
      />
    )
  }
}

icon.test.js

/* global describe, it, expect */

import React from 'react'
import renderer from 'react-test-renderer'

import Icon from '../../lib/components/icon'

describe('Icon', () => {
  it('renders correctly', () => {
    const tree = renderer.create(
      <Icon
        type='pencil'
        className='test'
        />
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })
})

project.js

import React from 'react'

import Icon from './icon'

export default class Project extends React.Component {

  render () {
    const {children} = this.props
    return (
      <div>
        <div
          className='ProjectTitle'
          >
          <Icon type='list' />
          <a href='#'>A Link</a>
        </div>
        {children}
      </div>
    )
  }
}

project.test.js

import React from 'react'
import renderer from 'react-test-renderer'

import { mockComponent } from '../../testUtils'

jest.mock('../../lib/components/icon', () => { return mockComponent('Icon') })

import Project from '../../lib/components/project'

describe('Project', () => {
  it('renders correctly', () => {
    const tree = renderer.create(
      <Project/>
    ).toJSON()
    expect(tree).toMatchSnapshot()
  })
})

testUtils.js

import React from 'react'

export function mockComponent (componentName) {
  return (props) => {
    return (
      <mocked originalComponent={componentName} {...props}>{props.children}</mocked>
    )
  }
}

export function mockNamedComponents (componentNames) {
  const mockedComponents = {}
  for (let i = 0; i < componentNames.length; i++) {
    const name = componentNames[i]
    mockedComponents[name] = mockComponent(name)
  }
  return mockedComponents
}

Simply doing jest.mock('../../lib/components/icon', () => 'icon' }) will work too and produce <icon ... /> in your snapshot but without being expanded / deep rendered. Not sure why you need the extra mockComponent function but I'm very new to this too and might be missing something.

That's a much better approach, @damusnet! That's pretty much the exact functionality I was going for with my mockComponent and mockNamedComponents functions. Still wondering if there is an even more shorthand approach that would do this mocking behavior without having to manually define this boilerplate of an anonymous function each time.

TypeError: Cannot read property 'mockComponent' of undefined , I'm getting this , I checked the path of testUtils file as well.

TypeError: Cannot read property 'mockComponent' of undefined

how we can write test cases for the child component if we use above child mocking example