From a47f95d4dbd100c248e1b2d52147cff9f4fb4925 Mon Sep 17 00:00:00 2001 From: Bruno Sampaio Date: Thu, 14 Feb 2019 11:55:29 +0100 Subject: [PATCH 1/2] Fix #7883 React.memo with snapshot testing results in * Handle memo components in the `getType` function so that a name like `Memo(ComponentName)` is returned instead of `UNDEFINED`. --- CHANGELOG.md | 1 + packages/pretty-format/src/__tests__/react.test.tsx | 10 ++++++++++ packages/pretty-format/src/plugins/ReactElement.ts | 7 +++++++ 3 files changed, 18 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d486997c2912..b703cb081059 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - `[jest-cli]` Refactor `-o` and `--coverage` combined ([#7611](https://github.com/facebook/jest/pull/7611)) - `[expect]` Fix custom async matcher stack trace ([#7652](https://github.com/facebook/jest/pull/7652)) - `[jest-changed-files]` Improve default file selection for Mercurial repos ([#7880](https://github.com/facebook/jest/pull/7880)) +- `[pretty-format]` React.memo with snapshot testing results in ([#7891](https://github.com/facebook/jest/pull/7891)) ### Chore & Maintenance 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'; }; From a6c5a8f497e89885aa68a27a2316168e34ce648c Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Thu, 14 Feb 2019 13:20:32 +0100 Subject: [PATCH 2/2] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b703cb081059..a82d5ef3f82d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,13 +4,13 @@ - `[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 - `[jest-cli]` Refactor `-o` and `--coverage` combined ([#7611](https://github.com/facebook/jest/pull/7611)) - `[expect]` Fix custom async matcher stack trace ([#7652](https://github.com/facebook/jest/pull/7652)) - `[jest-changed-files]` Improve default file selection for Mercurial repos ([#7880](https://github.com/facebook/jest/pull/7880)) -- `[pretty-format]` React.memo with snapshot testing results in ([#7891](https://github.com/facebook/jest/pull/7891)) ### Chore & Maintenance