Improve and fix issues with placeholder tests

Author: mnightingale

jest.config.js

@@ -7,6 +7,7 @@ module.exports = {
     ...tsjPreset.transform,
     '\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
   },
+  snapshotSerializers: ['enzyme-to-json/serializer'],
   setupFiles: ['<rootDir>/tests/config.tsx'],
   globals: {
     'ts-jest': {

package.json

@@ -78,6 +78,7 @@
     "dv-scripts": "^1.4.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.4",
+    "enzyme-to-json": "^3.5.0",
     "eslint-config-dv-scripts": "^1.1.1",
     "jest": "^26.4.2",
     "metro-react-native-babel-preset": "^0.63.0",

tests/__snapshots__/imageCacheHoc.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CacheableImage renders correctly with placeholder option set 1`] = `
+<Text>
+  Default Placeholder
+</Text>
+`;
+
+exports[`CacheableImage renders correctly with placeholder prop set 1`] = `
+<Text>
+  Placeholder
+</Text>
+`;

tests/imageCacheHoc.test.tsx

@@ -29,6 +29,7 @@ describe('CacheableImage', function () {
         uri:
           'file:///base/file/path/react-native-image-cache-hoc/d3b74e9fa8248a5805e2dcf17a8577acd28c089b.png',
       })
+      expect(wrapper.prop('style')).toStrictEqual(styles.image)
       done()
     })
   })
@@ -48,7 +49,7 @@ describe('CacheableImage', function () {
       },
     })
 
-    const propPlaceholder = <Text>Default Placeholder</Text>
+    const propPlaceholder = <Text>Placeholder</Text>
 
     const wrapper = shallow(
       <CacheableImage
@@ -58,7 +59,8 @@ describe('CacheableImage', function () {
       />,
       { disableLifecycleMethods: true },
     )
-    expect(wrapper.prop('style')).toBe(propPlaceholder.props.style)
+
+    expect(wrapper).toMatchSnapshot()
   })
 
   it('renders correctly with placeholder option set', () => {
@@ -84,6 +86,7 @@ describe('CacheableImage', function () {
       <CacheableImage style={styles.image} source={mockData.mockCacheableImageProps.source} />,
       { disableLifecycleMethods: true },
     )
-    expect(wrapper.prop('style')).toBe(optionPlaceholder.props.style)
+
+    expect(wrapper).toMatchSnapshot()
   })
 })

yarn.lock

@@ -4666,6 +4666,14 @@ enzyme-shallow-equal@^1.0.1, enzyme-shallow-equal@^1.0.4:
     has "^1.0.3"
     object-is "^1.1.2"
 
+enzyme-to-json@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.5.0.tgz#3d536f1e8fb50d972360014fe2bd64e6a672f7dd"
+  integrity sha512-clusXRsiaQhG7+wtyc4t7MU8N3zCOgf4eY9+CeSenYzKlFST4lxerfOvnWd4SNaToKhkuba+w6m242YpQOS7eA==
+  dependencies:
+    lodash "^4.17.15"
+    react-is "^16.12.0"
+
 enzyme@^3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"