[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.

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",

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();
     });

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();
     });

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();

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();
     });

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"', () => {

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();
     });