Switching to use forwardRef

src/components/App/index.js

@@ -146,7 +146,7 @@ class App extends React.PureComponent {
         <p>Sample warning message</p>
       </Message>
       { image && <div className={ style.render }>
-        <SVG data={ image } imageRef={ this.image }/>
+        <SVG data={ image } ref={ this.image }/>
       </div> }
     </React.Fragment>;
   }

src/components/App/test.js

@@ -4,12 +4,10 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { App } from 'components/App';
-import renderImage from 'components/SVG';
 import { translate } from '__mocks__/i18n';
 
 describe('App', () => {
   test('rendering', () => {
-    renderImage.mockReturnValue('Testing image');
     const component = shallow(
       <App t={ translate }/>
     );

src/components/SVG/index.js

@@ -34,15 +34,14 @@ const render = (data, extraProps) => {
     children.length === 1 ? children[0] : children);
 };
 
-const SVG = ({ data, imageRef: ref }) => render(data, { ref });
+const SVG = React.forwardRef(({ data }, ref) => render(data, { ref }));
 
 SVG.propTypes = {
   data: PropTypes.shape({
     type: PropTypes.oneOf(Object.keys(nodeTypes)).isRequired,
     props: PropTypes.object,
     children: PropTypes.array
-  }).isRequired,
-  imageRef: PropTypes.func
+  }).isRequired
 };
 
 export default SVG;

src/components/SVG/test.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import SVG from 'components/SVG';
-import Pin from './Pin';
 
 describe('SVG', () => {
   test('rendering', async () => {
@@ -94,16 +93,4 @@ describe('SVG', () => {
     );
     expect(component).toMatchSnapshot();
   });
-
-  test('imageRef prop', () => {
-    let image;
-    const imageRef = element => image = element;
-    const data = {
-      type: 'Pin'
-    };
-    mount(
-      <SVG data={ data } imageRef={ imageRef }/>
-    );
-    expect(image).toBeInstanceOf(Pin);
-  });
 });