From 25639176ffb70aaddce895bbe6b00d787b24abcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Yrj=C3=B6l=C3=A4?= Date: Wed, 6 Sep 2017 03:18:37 -0700 Subject: [PATCH] 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 --- .../assetRelativePathInSnapshot.js.snap | 20 ++++++++++++++ .../__tests__/assetRelativePathInSnapshot.js | 25 +++++++++++++++++ Libraries/Image/__tests__/img/img1.png | Bin 0 -> 95 bytes Libraries/Image/__tests__/img/img2.png | Bin 0 -> 95 bytes jest-preset.json | 5 +++- jest/assetFileTransformer.js | 26 ++++++++++++++++++ package.json | 4 +-- 7 files changed, 77 insertions(+), 3 deletions(-) create mode 100644 Libraries/Image/__tests__/__snapshots__/assetRelativePathInSnapshot.js.snap create mode 100644 Libraries/Image/__tests__/assetRelativePathInSnapshot.js create mode 100644 Libraries/Image/__tests__/img/img1.png create mode 100644 Libraries/Image/__tests__/img/img2.png create mode 100644 jest/assetFileTransformer.js diff --git a/Libraries/Image/__tests__/__snapshots__/assetRelativePathInSnapshot.js.snap b/Libraries/Image/__tests__/__snapshots__/assetRelativePathInSnapshot.js.snap new file mode 100644 index 000000000..3ce7e1922 --- /dev/null +++ b/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`] = ` + + + + +`; diff --git a/Libraries/Image/__tests__/assetRelativePathInSnapshot.js b/Libraries/Image/__tests__/assetRelativePathInSnapshot.js new file mode 100644 index 000000000..e23bd1a75 --- /dev/null +++ b/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( + + + + + )).toMatchSnapshot(); +}); diff --git a/Libraries/Image/__tests__/img/img1.png b/Libraries/Image/__tests__/img/img1.png new file mode 100644 index 0000000000000000000000000000000000000000..1914264c08781d1f30ee0b8482bccf44586f2dc1 GIT binary patch literal 95 zcmeAS@N?(olHy`uVBq!ia0vp^j3CU&3?x-=hn)ga%mF?ju0VQumF+E%TuG2$FoVOh l8)-lem#2$k2*>s01R$Gz9%CSj!PC{xWt~$(697H@6ZHT9 literal 0 HcmV?d00001 diff --git a/Libraries/Image/__tests__/img/img2.png b/Libraries/Image/__tests__/img/img2.png new file mode 100644 index 0000000000000000000000000000000000000000..1914264c08781d1f30ee0b8482bccf44586f2dc1 GIT binary patch literal 95 zcmeAS@N?(olHy`uVBq!ia0vp^j3CU&3?x-=hn)ga%mF?ju0VQumF+E%TuG2$FoVOh l8)-lem#2$k2*>s01R$Gz9%CSj!PC{xWt~$(697H@6ZHT9 literal 0 HcmV?d00001 diff --git a/jest-preset.json b/jest-preset.json index d765ffc93..ccffab34a 100644 --- a/jest-preset.json +++ b/jest-preset.json @@ -7,12 +7,15 @@ ] }, "moduleNameMapper": { - "^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$": "RelativeImageStub", "^React$": "/node_modules/react" }, "modulePathIgnorePatterns": [ "/node_modules/react-native/Libraries/react-native/" ], + "transform": { + "^.+\\.js$": "babel-jest", + "^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$": "/node_modules/react-native/jest/assetFileTransformer.js" + }, "transformIgnorePatterns": [ "node_modules/(?!(jest-)?react-native|react-clone-referenced-element)" ], diff --git a/jest/assetFileTransformer.js b/jest/assetFileTransformer.js new file mode 100644 index 000000000..c533ec446 --- /dev/null +++ b/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]), +}; diff --git a/package.json b/package.json index 8ad958f1a..a0893ce70 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ }, "jest": { "transform": { + "^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$": "/jest/assetFileTransformer.js", ".*": "./jest/preprocessor.js" }, "setupFiles": [ @@ -19,8 +20,7 @@ ], "timers": "fake", "moduleNameMapper": { - "^React$": "/Libraries/react-native/React.js", - "^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub" + "^React$": "/Libraries/react-native/React.js" }, "testPathIgnorePatterns": [ "Libraries/Renderer",