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.

Sign up for GitHub

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

Jump to bottom

use react-is in pretty-format #8060

Merged
merged 10 commits into from Mar 7, 2019
Merged

use react-is in pretty-format #8060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
35e22a7
use react-is in pretty-format
mishra-prabhakar Mar 6, 2019
7d1a2d9
drop explicit equality check boolean return type
mishra-prabhakar Mar 6, 2019
0596689
isElement check for React element
mishra-prabhakar Mar 6, 2019
d23746f
pass element instead of type
mishra-prabhakar Mar 6, 2019
46b85d0
fix typo for getting name of forwardRef
mishra-prabhakar Mar 6, 2019
80cf7e6
pass type to isMemo
mishra-prabhakar Mar 6, 2019
982fd30
Update CHANGELOG.md
SimenB Mar 7, 2019
09ffcce
Merge branch 'master' into pretty-format/#7895
SimenB Mar 7, 2019
6192fda
Merge branch 'master' into pretty-format/#7895
mishra-prabhakar Mar 7, 2019
a694a1f
Update CHANGELOG.md
SimenB Mar 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 1 addition & 7 deletions CHANGELOG.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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