From 35e22a73e9277553b97b27f7e422f867ffd512d7 Mon Sep 17 00:00:00 2001 From: Prabhakar Mishra Date: Wed, 6 Mar 2019 12:02:31 +0530 Subject: [PATCH 1/8] use react-is in pretty-format --- packages/pretty-format/package.json | 4 +++- .../pretty-format/src/plugins/ReactElement.ts | 17 +++++++---------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/pretty-format/package.json b/packages/pretty-format/package.json index ef976df12eef..3ea69b2ff8f5 100644 --- a/packages/pretty-format/package.json +++ b/packages/pretty-format/package.json @@ -15,12 +15,14 @@ "dependencies": { "@jest/types": "^24.1.0", "ansi-regex": "^4.0.0", - "ansi-styles": "^3.2.0" + "ansi-styles": "^3.2.0", + "react-is": "^16.8.4" }, "devDependencies": { "@types/ansi-regex": "^4.0.0", "@types/ansi-styles": "^3.2.1", "@types/react": "*", + "@types/react-is": "^16.7.1", "@types/react-test-renderer": "*", "immutable": "4.0.0-rc.9", "react": "*", diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts index 83b71fcde830..3400de90f05c 100644 --- a/packages/pretty-format/src/plugins/ReactElement.ts +++ b/packages/pretty-format/src/plugins/ReactElement.ts @@ -5,6 +5,7 @@ * LICENSE file in the root directory of this source tree. */ +import * as ReactIs from 'react-is'; import {Config, NewPlugin, Printer, Refs} from '../types'; import { @@ -15,11 +16,6 @@ import { } from './lib/markup'; const elementSymbol = Symbol.for('react.element'); -const fragmentSymbol = Symbol.for('react.fragment'); -const forwardRefSymbol = Symbol.for('react.forward_ref'); -const providerSymbol = Symbol.for('react.provider'); -const contextSymbol = Symbol.for('react.context'); -const memoSymbol = Symbol.for('react.memo'); // Given element.props.children, or subtree during recursive traversal, // return flattened array of children. @@ -42,19 +38,20 @@ const getType = (element: any) => { if (typeof type === 'function') { return type.displayName || type.name || 'Unknown'; } - if (type === fragmentSymbol) { + + if (ReactIs.isFragment(element) === true) { return 'React.Fragment'; } if (typeof type === 'object' && type !== null) { - if (type.$$typeof === providerSymbol) { + if (ReactIs.isContextProvider(type) === true) { return 'Context.Provider'; } - if (type.$$typeof === contextSymbol) { + if (ReactIs.isContextConsumer(type) === true) { return 'Context.Consumer'; } - if (type.$$typeof === forwardRefSymbol) { + if (ReactIs.isForwardRef(type) === true) { const functionName = type.render.displayName || type.render.name || ''; return functionName !== '' @@ -62,7 +59,7 @@ const getType = (element: any) => { : 'ForwardRef'; } - if (type.$$typeof === memoSymbol) { + if (ReactIs.isMemo(type) === true) { const functionName = type.type.displayName || type.type.name || ''; return functionName !== '' ? 'Memo(' + functionName + ')' : 'Memo'; From 7d1a2d9594ed9f25d79d064dfffb0f0bdc6c00fc Mon Sep 17 00:00:00 2001 From: Prabhakar Mishra Date: Wed, 6 Mar 2019 21:56:35 +0530 Subject: [PATCH 2/8] drop explicit equality check boolean return type --- packages/pretty-format/src/plugins/ReactElement.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts index 3400de90f05c..cd87fd61302e 100644 --- a/packages/pretty-format/src/plugins/ReactElement.ts +++ b/packages/pretty-format/src/plugins/ReactElement.ts @@ -39,19 +39,19 @@ const getType = (element: any) => { return type.displayName || type.name || 'Unknown'; } - if (ReactIs.isFragment(element) === true) { + if (ReactIs.isFragment(element)) { return 'React.Fragment'; } if (typeof type === 'object' && type !== null) { - if (ReactIs.isContextProvider(type) === true) { + if (ReactIs.isContextProvider(type)) { return 'Context.Provider'; } - if (ReactIs.isContextConsumer(type) === true) { + if (ReactIs.isContextConsumer(type)) { return 'Context.Consumer'; } - if (ReactIs.isForwardRef(type) === true) { + if (ReactIs.isForwardRef(type)) { const functionName = type.render.displayName || type.render.name || ''; return functionName !== '' @@ -59,7 +59,7 @@ const getType = (element: any) => { : 'ForwardRef'; } - if (ReactIs.isMemo(type) === true) { + if (ReactIs.isMemo(type)) { const functionName = type.type.displayName || type.type.name || ''; return functionName !== '' ? 'Memo(' + functionName + ')' : 'Memo'; From 05966891ad225f23ccb7e782c1bdeaef855b8e1c Mon Sep 17 00:00:00 2001 From: Prabhakar Mishra Date: Thu, 7 Mar 2019 02:55:56 +0530 Subject: [PATCH 3/8] isElement check for React element --- packages/pretty-format/src/plugins/ReactElement.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts index cd87fd61302e..0dd4774a207b 100644 --- a/packages/pretty-format/src/plugins/ReactElement.ts +++ b/packages/pretty-format/src/plugins/ReactElement.ts @@ -15,8 +15,6 @@ import { printProps, } from './lib/markup'; -const elementSymbol = Symbol.for('react.element'); - // Given element.props.children, or subtree during recursive traversal, // return flattened array of children. const getChildren = (arg: Array, children = []) => { @@ -109,7 +107,7 @@ export const serialize = ( indentation, ); -export const test = (val: any) => val && val.$$typeof === elementSymbol; +export const test = (val: any) => val && ReactIs.isElement(val); const plugin: NewPlugin = {serialize, test}; From d23746f26eb5a85199c589eac14de0981a1c8b57 Mon Sep 17 00:00:00 2001 From: Prabhakar Mishra Date: Thu, 7 Mar 2019 03:47:52 +0530 Subject: [PATCH 4/8] pass element instead of type --- packages/pretty-format/src/plugins/ReactElement.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts index 0dd4774a207b..90c32180198c 100644 --- a/packages/pretty-format/src/plugins/ReactElement.ts +++ b/packages/pretty-format/src/plugins/ReactElement.ts @@ -41,23 +41,23 @@ const getType = (element: any) => { return 'React.Fragment'; } if (typeof type === 'object' && type !== null) { - if (ReactIs.isContextProvider(type)) { + if (ReactIs.isContextProvider(element)) { return 'Context.Provider'; } - if (ReactIs.isContextConsumer(type)) { + if (ReactIs.isContextConsumer(element)) { return 'Context.Consumer'; } - if (ReactIs.isForwardRef(type)) { - const functionName = type.render.displayName || type.render.name || ''; + if (ReactIs.isForwardRef(element)) { + const functionName = type.render.displayName || type.element.name || ''; return functionName !== '' ? 'ForwardRef(' + functionName + ')' : 'ForwardRef'; } - if (ReactIs.isMemo(type)) { + if (ReactIs.isMemo(element)) { const functionName = type.type.displayName || type.type.name || ''; return functionName !== '' ? 'Memo(' + functionName + ')' : 'Memo'; From 46b85d05ad8e2ad19be8f751b006cab7dca308b3 Mon Sep 17 00:00:00 2001 From: Prabhakar Mishra Date: Thu, 7 Mar 2019 04:05:02 +0530 Subject: [PATCH 5/8] fix typo for getting name of forwardRef --- packages/pretty-format/src/plugins/ReactElement.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts index 90c32180198c..838bc76041c4 100644 --- a/packages/pretty-format/src/plugins/ReactElement.ts +++ b/packages/pretty-format/src/plugins/ReactElement.ts @@ -50,7 +50,7 @@ const getType = (element: any) => { } if (ReactIs.isForwardRef(element)) { - const functionName = type.render.displayName || type.element.name || ''; + const functionName = type.render.displayName || type.render.name || ''; return functionName !== '' ? 'ForwardRef(' + functionName + ')' From 80cf7e6f77b49ac44407d9515a56c25614e0d082 Mon Sep 17 00:00:00 2001 From: Prabhakar Mishra Date: Thu, 7 Mar 2019 04:33:04 +0530 Subject: [PATCH 6/8] pass type to isMemo --- packages/pretty-format/src/plugins/ReactElement.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts index 838bc76041c4..e2d610cf0032 100644 --- a/packages/pretty-format/src/plugins/ReactElement.ts +++ b/packages/pretty-format/src/plugins/ReactElement.ts @@ -57,7 +57,7 @@ const getType = (element: any) => { : 'ForwardRef'; } - if (ReactIs.isMemo(element)) { + if (ReactIs.isMemo(type)) { const functionName = type.type.displayName || type.type.name || ''; return functionName !== '' ? 'Memo(' + functionName + ')' : 'Memo'; From 982fd3096ecf65dea67e7e1eae1162ab2c7667f0 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Thu, 7 Mar 2019 13:19:16 +0100 Subject: [PATCH 7/8] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cc627eee63da..cdecced3193c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -84,6 +84,7 @@ - `[@jest/source-map]`: Extract `getCallsite` function from `jest-util` into a new separate package ([#8029](https://github.com/facebook/jest/pull/8029)) - `[@jest/console]`: Extract custom `console` implementations from `jest-util` into a new separate package ([#8030](https://github.com/facebook/jest/pull/8030)) - `[docs]`: Improve runAllTimers doc (it exhausts the micro-task queue) ([#8031](https://github.com/facebook/jest/pull/8031)) +- `[pretty-format]`: Use `react-is` instead of manual `$$typeof` checks ([#8060](https://github.com/facebook/jest/pull/8060)) ### Performance From a694a1f6d6c083061369de6858712fdef0ca5cb8 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Thu, 7 Mar 2019 14:24:04 +0100 Subject: [PATCH 8/8] Update CHANGELOG.md --- CHANGELOG.md | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 73b08f75eb71..d054e84fa592 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,20 +2,14 @@ ### Features - - ### Fixes - - ### Chore & Maintenance - +- `[pretty-format]`: Use `react-is` instead of manual `$$typeof` checks ([#8060](https://github.com/facebook/jest/pull/8060)) ### Performance - - ## 24.3.0 We skipped 24.2.0 because a draft was accidentally published. Please use `24.3.0` or a newer version instead. @@ -113,9 +107,6 @@ We skipped 24.2.0 because a draft was accidentally published. Please use `24.3.0 - `[jest-watcher]`: Migrate to TypeScript ([#7843](https://github.com/facebook/jest/pull/7843)) - `[jest-worker]`: Migrate to TypeScript ([#7853](https://github.com/facebook/jest/pull/7853)) - `[jest]`: Migrate to TypeScript ([#8024](https://github.com/facebook/jest/pull/8024)) -- `[docs]` Update automock configuration, add note related to manual mocks ([#8051](https://github.com/facebook/jest/pull/8051)) -- `[@jest/test-result]`: Extract TestResult types and helpers into a new separate package ([#8034](https://github.com/facebook/jest/pull/8034)) -- `[pretty-format]`: Use `react-is` instead of manual `$$typeof` checks ([#8060](https://github.com/facebook/jest/pull/8060)) - `[pretty-format]`: Migrate to TypeScript ([#7809](https://github.com/facebook/jest/pull/7809), [#7809](https://github.com/facebook/jest/pull/7972)) ### Performance