Dummy example to illustrates how shallow, mount, withStyles and unwrap work

dummy.spec.js

import React from 'react'
import { withStyles } from '@material-ui/styles'
import { unwrap } from '@material-ui/core/test-utils'
import { mount, shallow } from 'enzyme'
import renderer from 'react-test-renderer'

const log = data => {
  // set false to avoid logging
  false && console.log(data)
}

const Foo = props => (
  <>Bar</>
)

const Button = props => (
  <button {...props}>
    <Foo />
  </button>
)

Button.defaultProps = {
  className: 'primary'
}

/**
 * dummy styles just to test with HOC behaviour 
 */
const styles = theme => {
  foo: {
    bar: 'baz'
  }
}

const ButtonStyled = withStyles(styles)(Button)

const ButtonNaked = unwrap(ButtonStyled)

describe('My Button', () => {
  const props = {
    className: 'secondary',
    onClick: jest.fn()
  }

  it('renders with shallow', () => {
    var component = shallow(<Button className={props.className} />)
    log(component.debug())
    expect(component.exists()).toBeTruthy()
    expect(component.find(Foo)).toBeTruthy()
    // falsy because Foo is not rendered
    expect(component.contains('Bar')).toBeFalsy()
  })

  it('renders with mount', () => {
    var component = mount(<Button className={props.className} />)
    log(component.debug())
    expect(component.exists()).toBeTruthy()
    expect(component.find(Foo)).toBeTruthy()
    // truthy because Foo is rendered
    expect(component.contains('Bar')).toBeTruthy()
    component.unmount()
  })

  it('handles onClick event with shallow', () => {
    var component = shallow(<Button onClick={props.onClick} />)
    log(component.debug())
    expect(component.exists()).toBeTruthy()
    component.simulate('click')
    expect(props.onClick).toHaveBeenCalled()
  })

  it('handles onClick event with mount', () => {
    var component = mount(<Button onClick={props.onClick} />)
    log(component.debug())
    expect(component.exists()).toBeTruthy()
    component.simulate('click')
    expect(props.onClick).toHaveBeenCalled()
    component.unmount()
  })

  it('renders ButtonStyled with shallow', () => {
    var component = shallow(<ButtonStyled className={props.className} />)
    log(component.debug())
    expect(component.exists()).toBeTruthy()
    expect(component.find(Foo)).toBeTruthy()
    // falsy because Foo is not rendered
    expect(component.contains('Bar')).toBeFalsy()
  })

  it('renders ButtonStyled with mount', () => {
    var component = mount(<ButtonStyled className={props.className} />)
    log(component.debug())
    expect(component.exists()).toBeTruthy()
    expect(component.find(Foo)).toBeTruthy()
    // truthy because Foo is rendered
    expect(component.contains('Bar')).toBeTruthy()
    component.unmount()
  })

  it('renders ButtonNaked with shallow', () => {
    var component = shallow(<ButtonNaked className={props.className} />)
    log(component.debug())
    expect(component.exists()).toBeTruthy()
    expect(component.find(Foo)).toBeTruthy()
    // falsy because Foo is not rendered
    expect(component.contains('Bar')).toBeFalsy()
  })

  it('renders ButtonNaked with mount', () => {
    var component = mount(<ButtonNaked className={props.className} />)
    log(component.debug())
    expect(component.exists()).toBeTruthy()
    expect(component.find(Foo)).toBeTruthy()
    // truthy because Foo is rendered
    expect(component.contains('Bar')).toBeTruthy()
    component.unmount()
  })

  it('renders with snapshot', () => {
    var component = renderer.create(<Button className={props.className} />).toJSON()
    log(component)
    expect(component).toMatchSnapshot()
  })
})

/*
Output:

    console.log src/dummy-data/dummy-button.spec.js:16
      <button className="secondary">
        <Foo />
      </button>

    console.log src/dummy-data/dummy-button.spec.js:16
      <Button className="secondary">
        <button className="secondary">
          <Foo>
            Bar
          </Foo>
        </button>
      </Button>

    console.log src/dummy-data/dummy-button.spec.js:16
      <button onClick={[Function: mockConstructor]} className="primary">
        <Foo />
      </button>

    console.log src/dummy-data/dummy-button.spec.js:16
      <Button onClick={[Function: mockConstructor]} className="primary">
        <button onClick={[Function: mockConstructor]} className="primary">
          <Foo>
            Bar
          </Foo>
        </button>
      </Button>

    console.log src/dummy-data/dummy-button.spec.js:16
      <ContextConsumer>
        [function]
      </ContextConsumer>

    console.log src/dummy-data/dummy-button.spec.js:16
      <WithStyles(Button) className="secondary">
        <WithStylesInner stylesOptions={{...}} theme={{...}} className="secondary">
          <Button classes={{...}} className="secondary">
            <button classes={{...}} className="secondary">
              <Foo>
                Bar
              </Foo>
            </button>
          </Button>
        </WithStylesInner>
      </WithStyles(Button)>

    console.log src/dummy-data/dummy-button.spec.js:16
      <button className="secondary">
        <Foo />
      </button>

    console.log src/dummy-data/dummy-button.spec.js:16
      <Button className="secondary">
        <button className="secondary">
          <Foo>
            Bar
          </Foo>
        </button>
      </Button>

    console.log src/dummy-data/dummy-button.spec.js:16
      { type: 'button',
        props: { className: 'secondary' },
        children: [ 'Bar' ] }
*/