use react-is in pretty-format (#8060)

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.

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

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<any>, children = []) => {
@@ -42,27 +36,28 @@ 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 !== ''
         ? 'ForwardRef(' + functionName + ')'
         : '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};