Pass image unit tests

Author: kidroca

packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap

@@ -329,14 +329,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="filter: url(#tint-57);"
+    style="filter: url(#tint-58);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-57"
+        id="tint-58"
       >
         <feflood
           flood-color="blue"
@@ -378,7 +378,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-56);"
+    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-57);"
   />
   <img
     alt=""
@@ -391,7 +391,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
   >
     <defs>
       <filter
-        id="tint-56"
+        id="tint-57"
       >
         <feflood
           flood-color="red"

packages/react-native-web/src/exports/Image/__tests__/index-test.js

@@ -21,6 +21,9 @@ describe('components/Image', () => {
   beforeEach(() => {
     ImageUriCache._entries = {};
     window.Image = jest.fn(() => ({}));
+    ImageLoader.load = jest.fn().mockImplementation((src, onLoad, onError) => {
+      onLoad(src);
+    });
   });
 
   afterEach(() => {
@@ -107,9 +110,6 @@ describe('components/Image', () => {
   describe('prop "onLoad"', () => {
     test('is called after image is loaded from network', () => {
       jest.useFakeTimers();
-      ImageLoader.load = jest.fn().mockImplementation((_, onLoad, onError) => {
-        onLoad();
-      });
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
@@ -127,9 +127,6 @@ describe('components/Image', () => {
 
     test('is called after image is loaded from cache', () => {
       jest.useFakeTimers();
-      ImageLoader.load = jest.fn().mockImplementation((_, onLoad, onError) => {
-        onLoad();
-      });
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
@@ -261,11 +258,6 @@ describe('components/Image', () => {
 
     test('is set immediately if the image was preloaded', () => {
       const uri = 'https://yahoo.com/favicon.ico';
-      ImageLoader.load = jest
-        .fn()
-        .mockImplementationOnce((_, onLoad, onError) => {
-          onLoad();
-        });
       return Image.prefetch(uri).then(() => {
         const source = { uri };
         const { container } = render(<Image source={source} />, {
@@ -319,7 +311,7 @@ describe('components/Image', () => {
       );
       expect(container.firstChild).toMatchSnapshot();
       act(() => {
-        loadCallback();
+        loadCallback({ uri });
       });
       expect(container.firstChild).toMatchSnapshot();
     });

packages/react-native-web/src/exports/Image/index.js

@@ -260,16 +260,17 @@ const Image: React.AbstractComponent<
   }
 
   // Image loading
+  const uri = resolveAssetUri(source);
+  let headers;
+  if (source && typeof source.headers === 'object') {
+    headers = ((source.headers: any): { [key: string]: string });
+  }
+
   React.useEffect(() => {
-    const uri = resolveAssetUri(source);
     if (uri != null) {
       updateState(LOADING);
       if (onLoadStart) onLoadStart();
 
-      let headers;
-      if (source && typeof source.headers === 'object')
-        headers = ((source.headers: any): { [key: string]: string });
-
       const requestId = ImageLoader.load(
         { uri, headers },
         function load(result) {
@@ -303,7 +304,7 @@ const Image: React.AbstractComponent<
 
       return effectCleanup;
     }
-  }, [source, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  }, [updateState, onError, onLoad, onLoadEnd, onLoadStart, uri, headers]);
 
   return (
     <View