CtaImage.js

import React from 'react'

class CtaImage extends React.Component {
  constructor(props) {
    super(props)
    this.state = { image: null }
  }

  componentDidMount() {
    const { ctaImage } = this.props
    const image = URL.createObjectURL(ctaImage)
    this.setState({ image })
  }

  componentWillUnmount() {
    const { image } = this.state
    URL.revokeObjectURL(image)
  }

  render() {
    const { image } = this.state
    return (
      <div className="cta-image">
        <img src={image} />
      </div>
    )
  }
}

export default CtaImage

CtaImage.test.js

import React from 'react'
import {shallow} from 'enzyme'

import CtaImage from '../CtaImage'

jest.mock('../../../../../../i18next/index')

const getFakeDropzoneFile = (name = 'fake-file.jpg', size = 16, type = 'image/jpeg') => {
  const blob = new Blob([''], { type })
  blob.name = name
  Object.defineProperty(blob, 'size', {
    get() {
      return size
    },
  })
  return blob
}

const getWrapper = () => {
  const props = {
    ctaImage: getFakeDropzoneFile(),
  }
  const wrapper = shallow(<CtaImage {...props} />)
  return { wrapper, props }
}

describe('CtaImage component', () => {
  beforeEach(() => {
    global.URL.createObjectURL = jest.fn(obj => `preview-${obj.name}`)
  })

  it('should render the image', () => {
    const { wrapper } = getWrapper()
    expect(wrapper).toMatchSnapshot()
  })

  xit('should create an Image Blob object in state when did mount component', () => { })

  xit('should destroy an Image Blob object when unmount the component', () => { })
})

CtaImage.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CtaImage component should render the image 1`] = `
<div
  className="cta-image"
>
  <img
    src="preview-fake-file.jpg"
  />
</div>
`;