Fix avatar tests

app/soapbox/components/__tests__/__snapshots__/avatar-test.js.snap

@@ -2,30 +2,36 @@
 
 exports[`<Avatar /> Autoplay renders an animated avatar 1`] = `
 <div
-  className="account__avatar"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
+  className="account__avatar still-image"
   style={
     Object {
-      "backgroundImage": "url(/animated/alice.gif)",
       "height": "100px",
       "width": "100px",
     }
   }
-/>
+>
+  <img
+    alt=""
+    onLoad={[Function]}
+    src="/animated/alice.gif"
+  />
+</div>
 `;
 
 exports[`<Avatar /> Still renders a still avatar 1`] = `
 <div
-  className="account__avatar"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
+  className="account__avatar still-image"
   style={
     Object {
-      "backgroundImage": "url(/static/alice.jpg)",
       "height": "100px",
       "width": "100px",
     }
   }
-/>
+>
+  <img
+    alt=""
+    onLoad={[Function]}
+    src="/animated/alice.gif"
+  />
+</div>
 `;

app/soapbox/components/__tests__/__snapshots__/avatar_overlay-test.js.snap

@@ -5,20 +5,24 @@ exports[`<AvatarOverlay renders a overlay avatar 1`] = `
   className="account__avatar-overlay"
 >
   <div
-    className="account__avatar-overlay-base"
-    style={
-      Object {
-        "backgroundImage": "url(/static/alice.jpg)",
-      }
-    }
-  />
+    className="account__avatar-overlay-base still-image"
+    style={Object {}}
+  >
+    <img
+      alt=""
+      onLoad={[Function]}
+      src="/animated/alice.gif"
+    />
+  </div>
   <div
-    className="account__avatar-overlay-overlay"
-    style={
-      Object {
-        "backgroundImage": "url(/static/eve.jpg)",
-      }
-    }
-  />
+    className="account__avatar-overlay-overlay still-image"
+    style={Object {}}
+  >
+    <img
+      alt=""
+      onLoad={[Function]}
+      src="/animated/eve.gif"
+    />
+  </div>
 </div>
 `;

app/soapbox/components/__tests__/avatar-test.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 import { fromJS } from 'immutable';
-import { Avatar } from '../avatar';
+import { createComponent } from 'soapbox/test_helpers';
+import Avatar from '../avatar';
 
 describe('<Avatar />', () => {
   const account = fromJS({
@@ -16,7 +16,7 @@ describe('<Avatar />', () => {
 
   describe('Autoplay', () => {
     it('renders an animated avatar', () => {
-      const component = renderer.create(<Avatar account={account} animate size={size} />);
+      const component = createComponent(<Avatar account={account} animate size={size} />);
       const tree      = component.toJSON();
 
       expect(tree).toMatchSnapshot();
@@ -25,7 +25,7 @@ describe('<Avatar />', () => {
 
   describe('Still', () => {
     it('renders a still avatar', () => {
-      const component = renderer.create(<Avatar account={account} size={size} />);
+      const component = createComponent(<Avatar account={account} size={size} />);
       const tree      = component.toJSON();
 
       expect(tree).toMatchSnapshot();

app/soapbox/components/__tests__/avatar_overlay-test.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 import { fromJS } from 'immutable';
-import { AvatarOverlay } from '../avatar_overlay';
+import { createComponent } from 'soapbox/test_helpers';
+import AvatarOverlay from '../avatar_overlay';
 
 describe('<AvatarOverlay', () => {
   const account = fromJS({
@@ -21,7 +21,7 @@ describe('<AvatarOverlay', () => {
   });
 
   it('renders a overlay avatar', () => {
-    const component = renderer.create(<AvatarOverlay account={account} friend={friend} />);
+    const component = createComponent(<AvatarOverlay account={account} friend={friend} />);
     const tree      = component.toJSON();
 
     expect(tree).toMatchSnapshot();