Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use react-is in pretty-format #8060

Merged
merged 10 commits into from Mar 7, 2019
4 changes: 3 additions & 1 deletion packages/pretty-format/package.json
Expand Up @@ -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": "*",
Expand Down
17 changes: 7 additions & 10 deletions packages/pretty-format/src/plugins/ReactElement.ts
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 @@ -15,11 +16,6 @@ import {
} from './lib/markup';

const elementSymbol = Symbol.for('react.element');
mishra-prabhakar marked this conversation as resolved.
Show resolved Hide resolved
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.
Expand All @@ -42,27 +38,28 @@ 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) {
mishra-prabhakar marked this conversation as resolved.
Show resolved Hide resolved
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 !== ''
? 'ForwardRef(' + functionName + ')'
: 'ForwardRef';
}

if (type.$$typeof === memoSymbol) {
if (ReactIs.isMemo(type) === true) {
const functionName = type.type.displayName || type.type.name || '';

return functionName !== '' ? 'Memo(' + functionName + ')' : 'Memo';
Expand Down