diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ffc7847caef..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. diff --git a/packages/pretty-format/package.json b/packages/pretty-format/package.json index d3ea2e877d1a..2a1a94b54498 100644 --- a/packages/pretty-format/package.json +++ b/packages/pretty-format/package.json @@ -15,12 +15,14 @@ "dependencies": { "@jest/types": "^24.3.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..e2d610cf0032 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 { @@ -14,13 +15,6 @@ import { printProps, } 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. const getChildren = (arg: Array, children = []) => { @@ -42,19 +36,20 @@ const getType = (element: any) => { if (typeof type === 'function') { return type.displayName || type.name || 'Unknown'; } - if (type === fragmentSymbol) { + + if (ReactIs.isFragment(element)) { return 'React.Fragment'; } if (typeof type === 'object' && type !== null) { - if (type.$$typeof === providerSymbol) { + if (ReactIs.isContextProvider(element)) { return 'Context.Provider'; } - if (type.$$typeof === contextSymbol) { + if (ReactIs.isContextConsumer(element)) { return 'Context.Consumer'; } - if (type.$$typeof === forwardRefSymbol) { + if (ReactIs.isForwardRef(element)) { const functionName = type.render.displayName || type.render.name || ''; return functionName !== '' @@ -62,7 +57,7 @@ const getType = (element: any) => { : 'ForwardRef'; } - if (type.$$typeof === memoSymbol) { + if (ReactIs.isMemo(type)) { const functionName = type.type.displayName || type.type.name || ''; return functionName !== '' ? 'Memo(' + functionName + ')' : 'Memo'; @@ -112,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};