JEST & ENZYME | test component with React.createRef()

test.js

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

describe('Foo', () => {

  it('enzyme should mount object refs', () => {
    // inspired by:
    // - https://stackoverflow.com/a/55292957/1238150
    // - https://github.com/styled-components/styled-components/blob/e6f1b85726512cde163dd5fcdd7fb0f2439d4a09/packages/styled-components/src/test/basic.test.js
    // - https://github.com/styled-components/styled-components/blob/e6f1b85726512cde163dd5fcdd7fb0f2439d4a09/packages/styled-components/src/hoc/withTheme.js
    
    class Foo extends React.Component {
      constructor(props) {
        super(props)
        this.setRef = React.createRef()
      }

      render() {
        return <div ref={this.setRef} className="foo" />
      }
    }
    const wrapper = mount(<Foo />)
    const element = wrapper.find('.foo').instance()
    expect(wrapper.instance().setRef).toHaveProperty('current', element)
  })
})