Fix enzyme 3 errors

Change in behavior in enzyme 3. Mount wrapper is a component,
which has no classes. For a brief discussion see:
enzymejs/enzyme#1170

Enzyme 3 enables increased life cycle calls by default,
which were disabled in enzyme 2. Further discussion:
enzymejs/enzyme#1145

Workaround for React 16 requestAnimationFrame error in jest
Further discussion:
https://stackoverflow.com/a/43950142/583830

Author: jthetzel

package.json

@@ -26,6 +26,10 @@
       "tsx",
       "js"
     ],
+    "setupFiles": [
+      "<rootDir>/src/jest/setupFile.ts"
+    ],
+    "setupTestFrameworkScriptFile": "<rootDir>/src/jest/setupTestFrameworkScriptFile.ts",
     "browser": true,
     "verbose": true
   },
@@ -85,7 +89,7 @@
     "prettier": "1.7.0",
     "prop-types": "15.5.10",
     "react": "^16.0.0",
-    "react-dom": "16.0.0",
+    "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0",
     "recompose": "0.25.0",
     "ts-jest": "21.0.1",

src/__tests__/cluster.test.tsx

@@ -15,10 +15,6 @@ import { withContext } from 'recompose';
 import { mount } from 'enzyme';
 const PropTypes = require('prop-types'); // tslint:disable-line
 
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-Enzyme.configure({ adapter: new Adapter() });
-
 const coordinates = [
   [-12.408741828510017, 58.16339752811908],
   [-5.668629523822517, 50.06970856327533],

src/__tests__/geojson-layer.test.tsx

@@ -4,10 +4,6 @@ import { withContext } from 'recompose';
 import { mount } from 'enzyme';
 const PropTypes = require('prop-types'); // tslint:disable-line
 
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-Enzyme.configure({ adapter: new Adapter() });
-
 describe('GeoJSONLayer', () => {
   let GeoJSONLayerWithContext: any;
   let addLayerMock = jest.fn();

src/__tests__/layer.test.tsx

@@ -4,10 +4,6 @@ import { withContext } from 'recompose';
 import { mount } from 'enzyme';
 const PropTypes = require('prop-types'); // tslint:disable-line
 
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-Enzyme.configure({ adapter: new Adapter() });
-
 describe('Layer', () => {
   let LayerWithContext: any;
   let addLayerMock = jest.fn();

src/__tests__/map.test.tsx

@@ -15,14 +15,8 @@ import * as React from 'react';
 import ReactMapboxGl, { FitBounds } from '../map';
 import { mount } from 'enzyme';
 
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-Enzyme.configure({ adapter: new Adapter() });
-
 describe('Map', () => {
   let mapState;
-  console.log('Enzyme');
-  console.log(Enzyme);
   beforeEach(() => {
     mockfitBounds = jest.fn();
     mockon = jest.fn();

src/__tests__/popup.test.tsx

@@ -12,10 +12,6 @@ import { withContext } from 'recompose';
 import { mount } from 'enzyme';
 const PropTypes = require('prop-types'); // tslint:disable-line
 
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-Enzyme.configure({ adapter: new Adapter() });
-
 describe('Popup', () => {
   let PopupWithContext: any;
 
@@ -50,7 +46,11 @@ describe('Popup', () => {
     const wrapper = mount(
       <PopupWithContext className="custom-classname" coordinates={[0, 0]} />
     );
-
-    expect(wrapper.find('Popup').hasClass(defaultClassName[0])).toEqual(true);
+    expect(
+      wrapper
+        .find('Popup')
+        .childAt(0)
+        .hasClass(defaultClassName[0])
+    ).toEqual(true);
   });
 });

src/__tests__/rotation-control.test.tsx

@@ -2,13 +2,11 @@ import * as React from 'react';
 import RotationControl from '../rotation-control';
 import { shallow } from 'enzyme';
 
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-Enzyme.configure({ adapter: new Adapter() });
-
 describe('RotationControl', () => {
   it('should render the component', () => {
-    const wrapper = shallow(<RotationControl />);
+    const wrapper = shallow(<RotationControl />, {
+      disableLifecycleMethods: true
+    });
 
     expect(wrapper).toBeDefined();
   });

src/__tests__/scale-control.test.tsx

@@ -4,10 +4,6 @@ import { shallow } from 'enzyme';
 import { withContext } from 'recompose';
 const PropTypes = require('prop-types'); // tslint:disable-line
 
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-Enzyme.configure({ adapter: new Adapter() });
-
 describe('ScaleControl', () => {
   let ScaleControlWithContext: any;
 

src/__tests__/source.test.tsx

@@ -4,10 +4,6 @@ import { withContext } from 'recompose';
 import { mount } from 'enzyme';
 const PropTypes = require('prop-types'); // tslint:disable-line
 
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-Enzyme.configure({ adapter: new Adapter() });
-
 describe('Source', () => {
   let SourceWithContext: any;
   let addSourceMock: any;

src/__tests__/zoom-control.test.tsx

@@ -2,10 +2,6 @@ import * as React from 'react';
 import ZoomControl from '../zoom-control';
 import { shallow } from 'enzyme';
 
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-Enzyme.configure({ adapter: new Adapter() });
-
 describe('ZoomControl', () => {
   it('should render the component', () => {
     const wrapper = shallow(<ZoomControl />);

src/jest/setupFile.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+// Resolution for requestAnimationFrame not supported in jest error :
+// https://github.com/facebook/react/issues/9102#issuecomment-283873039
+// https://stackoverflow.com/a/43950142/583830
+
+global.window = global;
+window.addEventListener = () => {}; // tslint:disable-line
+window.requestAnimationFrame = () => {
+  throw new Error('requestAnimationFrame is not supported in Node');
+};
+
+module.exports = React;

src/jest/setupTestFrameworkScriptFile.ts

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

tsconfig.json

@@ -31,6 +31,7 @@
     "lib",
     "src/__tests__",
     "example",
-    "lib"
+    "lib",
+    "src/jest"
   ]
 }