Asset basenames in Jest snapshots

Summary:
This change only affects tests run with Jest. `require('/images/image1.png')` will be replaced with

```
Object {
  "testUri": "relative/path/to/images/image1.png",
}
```

in the Jest snapshot instead of always being 1 returned by RelativeImageStub. This change makes it possible to test conditional asset loading in components.

The problem with this change is that it will probably break a lot of existing snapshots, but that should be easily fixed when a project updates to a new version of React Native by running `jest -u` to update all snapshots.

A component can have conditional asset loading based on its props, this logic would be nice to test with Jest snapshots. This problem has been discussed in https://github.com/facebook/jest/issues/2838.

* **Who does this affect**: Everyone using `Image` in Jest snapshots
* **How to migrate**: Running `jest -u` will update the snapshots, the snapshots should be reviewed that they are correct.
* **Why make this breaking change**: It enables testing of conditional asset loading.
* **Severity (number of people affected x effort)**: Low.
Closes https://github.com/facebook/react-native/pull/13319

Reviewed By: rafeca

Differential Revision: D5708180

Pulled By: mjesun

fbshipit-source-id: 16ac42004d597db08545a21d4fffe95c5ee7e21f

Libraries/Image/__tests__/__snapshots__/assetRelativePathInSnapshot.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders assets based on relative path 1`] = `
+<View>
+  <Image
+    source={
+      Object {
+        "testUri": "Libraries/Image/__tests__/img/img1.png",
+      }
+    }
+  />
+  <Image
+    source={
+      Object {
+        "testUri": "Libraries/Image/__tests__/img/img2.png",
+      }
+    }
+  />
+</View>
+`;

Libraries/Image/__tests__/assetRelativePathInSnapshot.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+jest.disableAutomock();
+
+const React = require('React');
+const ReactTestRenderer = require('react-test-renderer');
+const Image = require('Image');
+const View = require('View');
+
+it('renders assets based on relative path', () => {
+  expect(ReactTestRenderer.create(
+  <View>
+    <Image source={require('./img/img1.png')} />
+    <Image source={require('./img/img2.png')} />
+  </View>
+  )).toMatchSnapshot();
+});

jest-preset.json

@@ -7,12 +7,15 @@
     ]
   },
   "moduleNameMapper": {
-    "^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$": "RelativeImageStub",
     "^React$": "<rootDir>/node_modules/react"
   },
   "modulePathIgnorePatterns": [
     "<rootDir>/node_modules/react-native/Libraries/react-native/"
   ],
+  "transform": {
+    "^.+\\.js$": "babel-jest",
+    "^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$": "<rootDir>/node_modules/react-native/jest/assetFileTransformer.js"
+  },
   "transformIgnorePatterns": [
     "node_modules/(?!(jest-)?react-native|react-clone-referenced-element)"
   ],

jest/assetFileTransformer.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+/* eslint-env node */
+
+const path = require('path');
+const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
+
+module.exports = {
+  // Mocks asset requires to return the filename. Makes it possible to test that
+  // the correct images are loaded for components. Essentially
+  // require('img1.png') becomes `Object { "testUri": 'path/to/img1.png' }` in
+  // the Jest snapshot.
+  process: (_, filename) =>
+    `module.exports = {
+      testUri: ${JSON.stringify(path.relative('.', filename))}
+    };`,
+  getCacheKey: createCacheKeyFunction([__filename]),
+};

package.json

@@ -12,6 +12,7 @@
   },
   "jest": {
     "transform": {
+      "^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$": "<rootDir>/jest/assetFileTransformer.js",
       ".*": "./jest/preprocessor.js"
     },
     "setupFiles": [
@@ -19,8 +20,7 @@
     ],
     "timers": "fake",
     "moduleNameMapper": {
-      "^React$": "<rootDir>/Libraries/react-native/React.js",
+      "^React$": "<rootDir>/Libraries/react-native/React.js"
-      "^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
     },
     "testPathIgnorePatterns": [
       "Libraries/Renderer",