Upgrade to React 16 and Enzyme 3

Author: tkrotoff

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  setupFiles: ['./src/JestSetup.ts'],
+
+  transform: {
+    "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+
+  mapCoverage: true
+};

package.json

@@ -31,23 +31,13 @@
     "tslint": "tslint --config tslint.json '**/*.ts{,x}' --exclude '**/node_modules/**' --exclude 'lib/**'"
   },
 
-  "jest": {
-    "transform": {
-      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
-    },
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
-    "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json"],
-
-    "mapCoverage": true
-  },
-
   "peerDependencies": {
     "react": ">=15",
     "react-dom": ">=15"
   },
 
   "dependencies": {
-    "prop-types": "^15.6.0",
+    "prop-types": "latest",
     "@types/prop-types": "latest"
   },
 
@@ -56,9 +46,9 @@
     "tslint": "latest",
     "tslint-react": "latest",
 
-    "react": "^15.6.2",
+    "react": "latest",
     "@types/react": "latest",
-    "react-dom": "^15.6.2",
+    "react-dom": "latest",
     "@types/react-dom": "latest",
 
     "ts-node": "latest",
@@ -95,8 +85,9 @@
     "@types/jest": "latest",
     "ts-jest": "latest",
 
-    "enzyme": "^2.9.1",
+    "enzyme": "latest",
     "@types/enzyme": "latest",
-    "react-test-renderer": "^15.6.2"
+    "enzyme-adapter-react-16": "latest",
+    "react-test-renderer": "latest"
   }
 }

src/DisplayFields.test.tsx

@@ -85,6 +85,9 @@ describe('reRender()', () => {
 
     form_username_empty.fieldsStore.addField('password');
 
+    // See http://airbnb.io/enzyme/docs/guides/migration-from-2-to-3.html#for-mount-updates-are-sometimes-required-when-they-werent-before
+    component.update();
+
     expect(component.text()).toEqual(
 `react-form-with-constraints = {
   "username": {
@@ -112,6 +115,8 @@ describe('reRender()', () => {
 
     form_username_empty.fieldsStore.removeField('username');
 
+    component.update();
+
     expect(component.text()).toEqual('react-form-with-constraints = {}');
   });
 
@@ -129,6 +134,8 @@ describe('reRender()', () => {
     field.validationMessage = "I'm a clone";
     form_username_empty.fieldsStore.updateField('username', field);
 
+    component.update();
+
     expect(component.text()).toEqual(
 `react-form-with-constraints = {
   "username": {

src/Enzyme.ts

@@ -40,7 +40,8 @@ export function getFieldFeedbacksMessages(inputs: ShallowWrapper<React.InputHTML
   inputs.forEach(input => {
     const { name, value } = input.props();
 
-    const fieldFeedbackList = findFieldFeedbackList(input.parent(), name!);
+    // FIXME parent() not listing children with Enzyme 3, see https://github.com/airbnb/enzyme/issues/1235#issuecomment-335053965
+    const fieldFeedbackList = findFieldFeedbackList(input.parents(), name!);
     fieldFeedbackList.forEach(fieldFeedback => {
       const { when, children } = fieldFeedback.props();
 

src/FieldFeedbacks.test.tsx

@@ -230,7 +230,7 @@ describe('render()', () => {
       username: fieldWithoutFeedback
     });
     expect(component.html()).toEqual(
-      '<div><!-- react-empty: 2 --></div>'
+      '<div></div>'
     );
   });
 
@@ -287,7 +287,7 @@ describe('render()', () => {
       });
 
       expect(component.html()).toEqual(
-        '<div><div class="error">Suffering from being missing</div><!-- react-empty: 3 --><!-- react-empty: 4 --></div>'
+        '<div><div class="error">Suffering from being missing</div></div>'
       );
     });
 
@@ -315,7 +315,7 @@ describe('render()', () => {
       });
 
       expect(component.html()).toEqual(
-        '<div><div class="error">Suffering from being missing</div><!-- react-empty: 3 --><div class="info">Suffering from being missing</div></div>'
+        '<div><div class="error">Suffering from being missing</div><div class="info">Suffering from being missing</div></div>'
       );
     });
   });
@@ -348,7 +348,7 @@ describe('reRender()', () => {
 
     form.fieldsStore.updateField('username', fieldWithoutFeedback);
     expect(component.html()).toEqual(
-      '<div><!-- react-empty: 4 --></div>'
+      '<div></div>'
     );
   });
 

src/JestSetup.ts

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import * as Adapter from 'enzyme-adapter-react-16';
+
+configure({adapter: new Adapter()});