Skip to content

Commit

Permalink
use react-is in pretty-format (#8060)
Browse files Browse the repository at this point in the history
  • Loading branch information
mishra-prabhakar authored and SimenB committed Mar 7, 2019
1 parent 36484b5 commit d4e91c3
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 21 deletions.
8 changes: 1 addition & 7 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 3 additions & 1 deletion packages/pretty-format/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "*",
Expand Down
21 changes: 8 additions & 13 deletions packages/pretty-format/src/plugins/ReactElement.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 = []) => {
Expand All @@ -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';
Expand Down Expand Up @@ -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};

Expand Down

0 comments on commit d4e91c3

Please sign in to comment.