[change] React 17 peer dependency

React 17 changed how blur/focus events are implemented, which requires a small
change to several unit tests to ensure the relevant DOM events are dispatched.

Author: necolas

package.json

@@ -58,9 +58,9 @@
     "metro-react-native-babel-preset": "^0.56.0",
     "npm-run-all": "^4.1.3",
     "prettier": "^1.18.2",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
-    "react-test-renderer": "^16.10.2"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-test-renderer": "^17.0.1"
   },
   "workspaces": [
     "packages/*"

packages/react-native-web/package.json

@@ -27,8 +27,8 @@
     "react-timer-mixin": "^0.13.4"
   },
   "peerDependencies": {
-    "react": ">=16.5.1",
-    "react-dom": ">=16.5.1"
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1"
   },
   "author": "Nicolas Gallagher",
   "license": "MIT",

packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js

@@ -75,9 +75,10 @@ describe('components/ActivityIndicator', () => {
         render(<ActivityIndicator onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
+      const body = createEventTarget(document.body);
       act(() => {
         target.focus();
-        target.blur();
+        body.focus({ relatedTarget: target.node });
       });
       expect(onBlur).toBeCalled();
     });

packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js

@@ -59,9 +59,10 @@ describe('CheckBox', () => {
         render(<CheckBox onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
+      const body = createEventTarget(document.body);
       act(() => {
         target.focus();
-        target.blur();
+        body.focus({ relatedTarget: target.node });
       });
       expect(onBlur).toBeCalled();
     });

packages/react-native-web/src/exports/Pressable/__tests__/index-test.js

@@ -72,14 +72,15 @@ describe('components/Pressable', () => {
       ));
     });
     const target = createEventTarget(ref.current);
+    const body = createEventTarget(document.body);
     expect(container.firstChild).toMatchSnapshot();
     act(() => {
       target.focus();
     });
     expect(onFocus).toBeCalled();
     expect(container.firstChild).toMatchSnapshot();
     act(() => {
-      target.blur();
+      body.focus({ relatedTarget: target.node });
     });
     expect(onBlur).toBeCalled();
     expect(container.firstChild).toMatchSnapshot();

packages/react-native-web/src/exports/Text/__tests__/index-test.js

@@ -76,9 +76,10 @@ describe('components/Text', () => {
         render(<Text onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
+      const body = createEventTarget(document.body);
       act(() => {
         target.focus();
-        target.blur();
+        body.focus({ relatedTarget: target.node });
       });
       expect(onBlur).toBeCalled();
     });
@@ -94,7 +95,6 @@ describe('components/Text', () => {
       const target = createEventTarget(ref.current);
       act(() => {
         target.focus();
-        target.blur();
       });
       expect(onFocus).toBeCalled();
     });

packages/react-native-web/src/exports/TextInput/__tests__/index-test.js

@@ -2,6 +2,8 @@
 
 import React from 'react';
 import TextInput from '..';
+import { act } from 'react-dom/test-utils';
+import { createEventTarget } from 'dom-event-testing-library';
 import { render } from '@testing-library/react';
 
 function findInput(container) {
@@ -238,9 +240,16 @@ describe('components/TextInput', () => {
 
   test('prop "onBlur"', () => {
     const onBlur = jest.fn();
-    const { container } = render(<TextInput onBlur={onBlur} />);
-    const input = findInput(container);
-    input.dispatchEvent(new window.FocusEvent('blur', {}));
+    const ref = React.createRef();
+    act(() => {
+      render(<TextInput onBlur={onBlur} ref={ref} />);
+    });
+    const target = createEventTarget(ref.current);
+    const body = createEventTarget(document.body);
+    act(() => {
+      target.focus();
+      body.focus({ relatedTarget: target.node });
+    });
     expect(onBlur).toHaveBeenCalledTimes(1);
     expect(TextInput.State.currentlyFocusedField()).toBe(null);
   });
@@ -267,11 +276,16 @@ describe('components/TextInput', () => {
 
   test('prop "onFocus"', () => {
     const onFocus = jest.fn();
-    const { container } = render(<TextInput onFocus={onFocus} />);
-    const input = findInput(container);
-    input.focus();
+    const ref = React.createRef();
+    act(() => {
+      render(<TextInput onFocus={onFocus} ref={ref} />);
+    });
+    const target = createEventTarget(ref.current);
+    act(() => {
+      target.focus();
+    });
     expect(onFocus).toHaveBeenCalledTimes(1);
-    expect(TextInput.State.currentlyFocusedField()).toBe(input);
+    expect(TextInput.State.currentlyFocusedField()).toBe(target.node);
   });
 
   describe('prop "onKeyPress"', () => {

packages/react-native-web/src/exports/View/__tests__/index-test.js

@@ -96,9 +96,10 @@ describe('components/View', () => {
         render(<View onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
+      const body = createEventTarget(document.body);
       act(() => {
         target.focus();
-        target.blur();
+        body.focus({ relatedTarget: target.node });
       });
       expect(onBlur).toBeCalled();
     });

yarn.lock

@@ -12743,7 +12743,7 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^16.10.2, react-dom@^16.8.3:
+react-dom@^16.8.3:
   version "16.10.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.10.2.tgz#4840bce5409176bc3a1f2bd8cb10b92db452fda6"
   integrity sha512-kWGDcH3ItJK4+6Pl9DZB16BXYAZyrYQItU4OMy0jAkv5aNqc+mAKb4TpFtAteI6TJZu+9ZlNhaeNQSVQDHJzkw==
@@ -12753,6 +12753,15 @@ react-dom@^16.10.2, react-dom@^16.8.3:
     prop-types "^15.6.2"
     scheduler "^0.16.2"
 
+react-dom@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
+  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.1"
+
 react-draggable@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.0.3.tgz#6b9f76f66431c47b9070e9b805bbc520df8ca481"
@@ -12813,6 +12822,11 @@ react-is@^16.12.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
+"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
 react-is@^16.7.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
@@ -12827,11 +12841,6 @@ react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
-react-is@^16.8.6:
-  version "16.10.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
-  integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==
-
 react-jss@^10.5.0:
   version "10.5.0"
   resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-10.5.0.tgz#a3e47e5f024d85e2f59fbf691bf276e1849dfd7f"
@@ -12878,6 +12887,14 @@ react-refresh@^0.4.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.2.tgz#54a277a6caaac2803d88f1d6f13c1dcfbd81e334"
   integrity sha512-kv5QlFFSZWo7OlJFNYbxRtY66JImuP2LcrFgyJfQaf85gSP+byzG21UbDQEYjU7f//ny8rwiEkO6py2Y+fEgAQ==
 
+react-shallow-renderer@^16.13.1:
+  version "16.14.1"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
+  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^16.12.0 || ^17.0.0"
+
 react-sizeme@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.7.tgz#231339ce8821ac2c26424c791e0027f89dae3e90"
@@ -12899,15 +12916,15 @@ react-syntax-highlighter@^11.0.2:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
-react-test-renderer@^16.10.2:
-  version "16.10.2"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.10.2.tgz#4d8492f8678c9b43b721a7d79ed0840fdae7c518"
-  integrity sha512-k9Qzyev6cTIcIfrhgrFlYQAFxh5EEDO6ALNqYqmKsWVA7Q/rUMTay5nD3nthi6COmYsd4ghVYyi8U86aoeMqYQ==
+react-test-renderer@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3187e636c3063e6ae498aedf21ecf972721574c7"
+  integrity sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA==
   dependencies:
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.8.6"
-    scheduler "^0.16.2"
+    react-is "^17.0.1"
+    react-shallow-renderer "^16.13.1"
+    scheduler "^0.20.1"
 
 react-textarea-autosize@^7.1.0:
   version "7.1.0"
@@ -12921,7 +12938,7 @@ react-timer-mixin@^0.13.4:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
 
-react@^16.10.2, react@^16.8.3:
+react@^16.8.3:
   version "16.10.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.10.2.tgz#a5ede5cdd5c536f745173c8da47bda64797a4cf0"
   integrity sha512-MFVIq0DpIhrHFyqLU0S3+4dIcBhhOvBE8bJ/5kHPVOVaGdo0KuiQzpcjCPsf585WvhypqtrMILyoE2th6dT+Lw==
@@ -12930,6 +12947,14 @@ react@^16.10.2, react@^16.8.3:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+react@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 read-cmd-shim@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz#87e43eba50098ba5a32d0ceb583ab8e43b961c16"
@@ -13643,6 +13668,14 @@ scheduler@^0.16.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
+  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"