diff --git a/CHANGELOG.md b/CHANGELOG.md index d486997c2912..a82d5ef3f82d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - `[expect]`: Improve report when matcher fails, part 7 ([#7866](https://github.com/facebook/jest/pull/7866)) - `[expect]`: Improve report when matcher fails, part 8 ([#7876](https://github.com/facebook/jest/pull/7876)) +- `[pretty-format]` Support `React.memo` ([#7891](https://github.com/facebook/jest/pull/7891)) ### Fixes diff --git a/packages/pretty-format/src/__tests__/react.test.tsx b/packages/pretty-format/src/__tests__/react.test.tsx index 44d33d4b083e..0f3c3a4f173a 100644 --- a/packages/pretty-format/src/__tests__/react.test.tsx +++ b/packages/pretty-format/src/__tests__/react.test.tsx @@ -709,6 +709,16 @@ test('supports forwardRef with a child', () => { ).toEqual('\n mouse\n'); }); +test('supports memo with a child', () => { + function Dog(props: any) { + return React.createElement('div', props, props.children); + } + + expect( + formatElement(React.createElement(React.memo(Dog), null, 'cat')), + ).toEqual('\n cat\n'); +}); + test('supports context Provider with a child', () => { const {Provider} = React.createContext('test'); diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts index aa05d4ebf72e..36fc15f3deee 100644 --- a/packages/pretty-format/src/plugins/ReactElement.ts +++ b/packages/pretty-format/src/plugins/ReactElement.ts @@ -19,6 +19,7 @@ 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. @@ -60,6 +61,12 @@ const getType = (element: any) => { ? 'ForwardRef(' + functionName + ')' : 'ForwardRef'; } + + if (type.$$typeof === memoSymbol) { + const functionName = type.type.displayName || type.type.name || ''; + + return functionName !== '' ? 'Memo(' + functionName + ')' : 'Memo'; + } } return 'UNDEFINED'; };