Skip to content

Commit

Permalink
[change] React 17 peer dependency
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@necolas
necolas committed Feb 5, 2021
1 parent f5c9f63 commit 744b619
Show file tree
Hide file tree
Showing 9 changed files with 83 additions and 32 deletions.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/*"
Expand Down
4 changes: 2 additions & 2 deletions packages/react-native-web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand Down
3 changes: 2 additions & 1 deletion packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand Down
3 changes: 2 additions & 1 deletion packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions packages/react-native-web/src/exports/Text/__tests__/index-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand All @@ -94,7 +95,6 @@ describe('components/Text', () => {
const target = createEventTarget(ref.current);
act(() => {
target.focus();
target.blur();
});
expect(onFocus).toBeCalled();
});
Expand Down
28 changes: 21 additions & 7 deletions packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
});
Expand All @@ -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"', () => {
Expand Down
3 changes: 2 additions & 1 deletion packages/react-native-web/src/exports/View/__tests__/index-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand Down
61 changes: 47 additions & 14 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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==
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 744b619

Please sign in to comment.