Use enzyme instead of snapshot tests and remove hacky workaround

Author: mnightingale

package.json

@@ -43,15 +43,17 @@
     "@babel/core": "^7.11.6",
     "babel-eslint": "^10.1.0",
     "coveralls": "^3.0.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.4",
     "eslint": "^7.8.1",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-native": "^3.9.1",
     "jest": "^26.4.2",
     "metro-react-native-babel-preset": "^0.63.0",
     "prettier": "^2.1.1",
-    "react": "^16.13.1",
+    "react": "^16.0.0",
+    "react-dom": "16",
     "react-native": "^0.63.2",
-    "react-test-renderer": "^16.13.1",
     "should": "^13.1.2",
     "should-sinon": "^0.0.6",
     "sinon": "^4.1.3"

tests/CacheableImage.test.js

@@ -9,6 +9,8 @@ import { Image } from 'react-native';
 import sinon from 'sinon';
 import 'should-sinon';
 import RNFetchBlob from 'rn-fetch-blob';
+import { shallow } from 'enzyme';
+import React from 'react';
 
 describe('CacheableImage', function () {
   it('HOC options validation should work as expected.', () => {
@@ -346,17 +348,25 @@ describe('CacheableImage', function () {
     });
   });
 
-  it('#render with valid props does not throw an error.', async () => {
+  it('#render with valid props does not throw an error.', (done) => {
     const CacheableImage = imageCacheHoc(Image);
 
-    const cacheableImage = new CacheableImage(mockData.mockCacheableImageProps);
+    const wrapper = shallow(
+      <CacheableImage {...mockData.mockCacheableImageProps} />
+    );
 
-    cacheableImage.render();
+    setImmediate(() => {
+      expect(wrapper.prop('source')).toStrictEqual({
+        uri: '/this/is/path/to/file.jpg',
+      });
 
-    cacheableImage.state.localFilePath = './test.jpg';
+      wrapper.setState({ localFilePath: './test.jpg' });
 
-    cacheableImage.render();
+      expect(wrapper.prop('source')).toStrictEqual({
+        uri: './test.jpg',
+      });
 
-    await new Promise((r) => setTimeout(r, 100)); // Hacky wait for lifecycle functions to complete
+      done();
+    });
   });
 });

tests/__snapshots__/imageCacheHoc.test.js.snap

@@ -6,6 +6,10 @@
 
 /* global jest */
 import * as ReactNative from 'react-native';
+import Adapter from 'enzyme-adapter-react-16';
+import Enzyme from 'enzyme';
+
+Enzyme.configure({ adapter: new Adapter() });
 
 /**
  * Override native modules with mocks where necessary.

tests/config.js

@@ -2,20 +2,16 @@
 /* global expect describe it */
 
 // Load dependencies
-import should from 'should'; // eslint-disable-line no-unused-vars
 import React from 'react';
-import 'react-native';
 import imageCacheHoc from '../src/imageCacheHoc';
-import { StyleSheet, View, Text, Image } from 'react-native';
+import { StyleSheet, Image } from 'react-native';
 import { mockData } from './mockData';
 import RNFetchBlob from 'rn-fetch-blob';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
 
 // Ensure component can mount successfully.
 describe('CacheableImage', function () {
-  it('renders correctly', async () => {
+  it('renders correctly 1', (done) => {
     //Mock values for local/remote file request logic.
     RNFetchBlob.fs.exists
       .mockResolvedValueOnce(false) // mock not exist in local permanent dir
@@ -32,43 +28,29 @@ describe('CacheableImage', function () {
     const CacheableImage = imageCacheHoc(Image);
 
     const styles = StyleSheet.create({
-      container: {
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-      },
       image: {
         height: 204,
         width: 150,
       },
-      welcome: {
-        fontSize: 20,
-        margin: 10,
-        textAlign: 'center',
-      },
     });
 
-    const tree = renderer.create(
-      <View style={styles.container}>
-        <Text style={styles.welcome}>Test CacheableImage Component</Text>
-        <CacheableImage
-          style={styles.image}
-          source={mockData.mockCacheableImageProps.source}
-          permanent={mockData.mockCacheableImageProps.permanent}
-        />
-      </View>
+    const wrapper = shallow(
+      <CacheableImage
+        style={styles.image}
+        source={mockData.mockCacheableImageProps.source}
+        permanent={mockData.mockCacheableImageProps.permanent}
+      />
     );
-    await new Promise((r) => setTimeout(r, 100)); // Hacky wait for lifecycle functions to complete
-    expect(tree).toMatchSnapshot(); //If UI changes, this snapshot must be updated. See comment below.
-
-    /**
-     The next time you run the tests, the rendered output will be compared to the previously created snapshot.
-     The snapshot should be committed along code changes. When a snapshot test fails, you need to inspect whether it is an intended or unintended change.
-     If the change is expected you can invoke Jest with npm test -- -u to overwrite the existing snapshot.
-     */
+
+    setImmediate(() => {
+      expect(wrapper.prop('source')).toStrictEqual({
+        uri: '/this/is/path/to/file.jpg',
+      });
+      done();
+    });
   });
 
-  it('renders correctly with placeholder prop set', async () => {
+  it('renders correctly with placeholder prop set', () => {
     //Mock values for local/remote file request logic.
     RNFetchBlob.fs.exists
       .mockResolvedValueOnce(false) // mock not exist in local permanent dir
@@ -85,11 +67,6 @@ describe('CacheableImage', function () {
     const CacheableImage = imageCacheHoc(Image);
 
     const styles = StyleSheet.create({
-      container: {
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-      },
       image: {
         height: 204,
         width: 150,
@@ -100,11 +77,6 @@ describe('CacheableImage', function () {
         height: 204,
         width: 150,
       },
-      welcome: {
-        fontSize: 20,
-        margin: 10,
-        textAlign: 'center',
-      },
     });
 
     const propPlaceholder = {
@@ -114,28 +86,19 @@ describe('CacheableImage', function () {
       },
     };
 
-    const tree = renderer.create(
-      <View style={styles.container}>
-        <Text style={styles.welcome}>Test CacheableImage Component</Text>
-        <CacheableImage
-          style={styles.image}
-          source={mockData.mockCacheableImageProps.source}
-          permanent={mockData.mockCacheableImageProps.permanent}
-          placeholder={propPlaceholder}
-        />
-      </View>
+    const wrapper = shallow(
+      <CacheableImage
+        style={styles.image}
+        source={mockData.mockCacheableImageProps.source}
+        permanent={mockData.mockCacheableImageProps.permanent}
+        placeholder={propPlaceholder}
+      />,
+      { disableLifecycleMethods: true }
     );
-    await new Promise((r) => setTimeout(r, 100)); // Hacky wait for lifecycle functions to complete
-    expect(tree).toMatchSnapshot(); //If UI changes, this snapshot must be updated. See comment below.
-
-    /**
-     The next time you run the tests, the rendered output will be compared to the previously created snapshot.
-     The snapshot should be committed along code changes. When a snapshot test fails, you need to inspect whether it is an intended or unintended change.
-     If the change is expected you can invoke Jest with npm test -- -u to overwrite the existing snapshot.
-     */
+    expect(wrapper.prop('style')).toBe(propPlaceholder.props.style);
   });
 
-  it('renders correctly with placeholder option set', async () => {
+  it('renders correctly with placeholder option set', () => {
     //Mock values for local/remote file request logic.
     RNFetchBlob.fs.exists
       .mockResolvedValueOnce(false) // mock not exist in local permanent dir
@@ -150,11 +113,6 @@ describe('CacheableImage', function () {
     });
 
     const styles = StyleSheet.create({
-      container: {
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-      },
       image: {
         height: 204,
         width: 150,
@@ -165,11 +123,6 @@ describe('CacheableImage', function () {
         height: 204,
         width: 150,
       },
-      welcome: {
-        fontSize: 20,
-        margin: 10,
-        textAlign: 'center',
-      },
     });
 
     const optionPlaceholder = {
@@ -183,23 +136,14 @@ describe('CacheableImage', function () {
       defaultPlaceholder: optionPlaceholder,
     });
 
-    const tree = renderer.create(
-      <View style={styles.container}>
-        <Text style={styles.welcome}>Test CacheableImage Component</Text>
-        <CacheableImage
-          style={styles.image}
-          source={mockData.mockCacheableImageProps.source}
-          permanent={mockData.mockCacheableImageProps.permanent}
-        />
-      </View>
+    const wrapper = shallow(
+      <CacheableImage
+        style={styles.image}
+        source={mockData.mockCacheableImageProps.source}
+        permanent={mockData.mockCacheableImageProps.permanent}
+      />,
+      { disableLifecycleMethods: true }
     );
-    expect(tree).toMatchSnapshot(); //If UI changes, this snapshot must be updated. See comment below.
-    await new Promise((r) => setTimeout(r, 100)); // Hacky wait for lifecycle functions to complete, this is after the snapshot check because we want to see the first render
-
-    /**
-     The next time you run the tests, the rendered output will be compared to the previously created snapshot.
-     The snapshot should be committed along code changes. When a snapshot test fails, you need to inspect whether it is an intended or unintended change.
-     If the change is expected you can invoke Jest with npm test -- -u to overwrite the existing snapshot.
-     */
+    expect(wrapper.prop('style')).toBe(optionPlaceholder.props.style);
   });
 });