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

[Powerade]

🐛 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

[SimenB]

That's odd, that was supposed to be fixed in 24.3.0: #7891. I'm not sure why it's not working - the test added in that PR passes.

Does it get the correct name in React devtools? I wonder if displayName is lost since you pass in an anonymous component

[Powerade]

Thanks for the quick response @SimenB.

It did not, in fact, appear on React Dev Tools (it appears as memo(Component)).

However, when I write:

export const MainMenu = React.memo(function MainMenu() {
    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>
    );
});

It does appear on React Dev Tools:

But the snapshot remains the same.

[SimenB]

Interesting! Could you put together a minimal reproduction that renders correctly in chrome devtools but not in Jest?

[Powerade]

I've created this repo here:
https://github.com/Powerade/jest-react-memo-bug

Please let me know if there's anything missing

[SimenB]

Thanks! That repo uses Jest 23 - we added support for React.memo un Jest 24

[Powerade]

Ty for the heads up. I've upgraded the dependencies. Can you please check again?

[SimenB]

Oh this uses enzyme-to-json. You should raise an issue there - the serializer does not live in Jest.

That said, I debugged a bit, and the bug appears to be in extractTypeName inside util.js in enzyme-to-json. It say the name of this node is Component:

I'm not sure how this is supposed to work: https://github.com/adriantoine/enzyme-to-json/blob/df30a5ace977c97fb42a6164a9f47af618ccf368/src/utils.js#L38-L54

Changing all the name.$$typeof to node.type.$$typeof creates the following snapshot:

// Jest Snapshot v1, https://goo.gl/fbAQLP

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

---

So yeah, this is a bug in either enzyme's typeName function or enzyme-to-json. If they disagree, we can reopen here 🙂

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.