Component created using React.memo appears as "Component" in snapshot

[Powerade]

Hello everyone, I've created an open issue on jest's official repo but apparently it looks to be a bug on this library instead so I'll leave it here.
Can you guys please take a look?
Thank you.

jestjs/jest#8122

---

🐛 Bug Report

To Reproduce

A clear and concise description of what the bug is.

Hello,
When, I have the following components:

MainMenu.jsx
export const MainMenu = React.memo(() => {
    return (
        <Nav variant="pills" className="main-menu flex-column">
            <Nav.Item>
                <LinkContainer to="/1">
                    <Nav.Link>1</Nav.Link>
                </LinkContainer>
            </Nav.Item>
            <Nav.Item>
                <LinkContainer to="/2">
                    <Nav.Link>2</Nav.Link>
                </LinkContainer>
            </Nav.Item>
            <Nav.Item>
                <LinkContainer to="/3">
                    <Nav.Link>3</Nav.Link>
                </LinkContainer>
            </Nav.Item>
            <Nav.Item>
                <LinkContainer to="/4">
                    <Nav.Link>4</Nav.Link>
                </LinkContainer>
            </Nav.Item>
        </Nav>
    );
});

App.jsx
export default () => {
    return (
        <div id="app">
            <h1>My App</h1>
            <MainMenu />
        </div>
    );
};

And test App.jsx with the following:

describe('App', () => {
    test('should render My App', () => {
        expect(shallow(<App />)).toMatchSnapshot();
    });
});

I get the following snapshot:

exports[`App should render My App 1`] = `
<div
  id="app"
>
  <h1>
    My App
  </h1>
  <Component />
</div>
`;

Expected behavior

As you can see, where I was expecting something like memo(MainMenu), I'm getting <Component />.
What's worse is, that if I replace the render in App to, instead of using <MainMenu />, to use another memoized component, the snapshot will still pass because it won't notice the difference.

Run npx envinfo --preset jest

Paste the results here:

System:
    OS: macOS Sierra 10.12.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 11.1.0 - ~/.nvm/versions/node/v11.1.0/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v11.1.0/bin/npm
  npmPackages:
    jest: ^24.5.0 => 24.5.0

Reproducible repo:

https://github.com/Powerade/jest-react-memo-bug

[sormy]

This is well known issue with babel react preset. Put React.memo() on separate line like:

export let MainMenu = function() {...}
MainMenu = React.memo(MainMenu)

[martinstark]

This has now become an issue when using Redux 7.x, which uses React.memo internally. Our shallow rendered snapshots have turned into:

    -   <Connect(TheComponentName)>
    +   <Component>

[nataly-chobat]

Yeah, we faced the same issue. It will be super perfect if it is possible to fix and display component name instead of

[fender]

Same issue for us too. Got around it with:

import React, { memo } from 'react';
const Tile = props => { ... };
export default memo(Tile);

[VincentLanglet]

It's maybe possible to make a PR with this comment:
jestjs/jest#8122 (comment)

PR are welcomed