Jest mock names not honoured in resulting snapshot

[anthonyhastings]

I've encountered an issue where taking a snapshot diff doesn't maintain a mock functions name. I've outlined a simplistic example to reproduce below:

// component.js

import React from 'react';
import PropTypes from 'prop-types';

const Component = ({ text, onClick }) =>
  <button onClick={onClick}>{text}</button>;

Component.propTypes = {
  onClick: PropTypes.func,
  text: PropTypes.string
};

Component.defaultProps = {
  text: 'Hello world!'
};

export default Component;

// component.spec.js

import React from 'react';
import renderer from 'react-test-renderer';
import Component from './component';

describe('Component', () => {
  it('renders correctly', () => {
    expect(renderer.create(
      <Component onClick={jest.fn().mockName('onClick')} />
    )).toMatchSnapshot();
  });

  it('accepts text and click functionality', () => {
    expect(
      renderer.create(
        <Component />
      )
    ).toMatchDiffSnapshot(
      renderer.create(
        <Component
          onClick={jest.fn().mockName('onClick')}
          text='Foo bar'
        />
      )
    );
  })
});

// component.spec.js.snap

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

exports[`Component accepts text and click functionality 1`] = `
"Snapshot Diff:
- First value
+ Second value

- <button>
-   Hello world!
+ <button
+   onClick={[Function mockConstructor]}
+ >
+   Foo bar
  </button>"
`;

exports[`Component renders correctly 1`] = `
<button
  onClick={[MockFunction onClick]}
>
  Hello world!
</button>
`;

The above example shows that a standard snapshot honours the mock name, but the resulting diff does not. I'm unsure if this is a setup problem on my part but my assumption is that it's not; my understanding is that snapshot-diff uses react-test-renderer under the hood by default, so I'd have expected the mock name to have been honoured.

[thymikee]

This lib uses packages from Jest:

snapshot-diff/package.json

Lines 22 to 24 in b03936d

	"jest-diff": "^24.0.0",
	"jest-snapshot": "^24.0.0",
	"pretty-format": "^24.0.0",

Maybe you need to make sure they're on the same version? (e.g. by Yarn resolutions or by regenerating the lock file). I'd suspect pretty-format to not be in line specifically.

[anthonyhastings]

Hi! I've used npm as the dependency management system here and from what I can tell, jest and snapshot-diff are both using the same instances of the packages. There's not multiple versions of each package's dependencies installed.

[thymikee]

Interesting. Does it work as expected when doing snapshotDiff(c1, c2).toMatchSnapshot()? Maybe we need to tweak how we call snapshot diffing serializer, but I don't recall what could change there. cc @pedrottimark

[anthonyhastings]

Based on your last message about calling the snapshotDiff method directly, here's an even smaller reproduction case:

Command:

console.log(
  snapshotDiff(
    renderer.create(<button onClick={jest.fn().mockName('hello')}>Hello</button>),
    renderer.create(<button onClick={jest.fn().mockName('world')}>World</button>)
  )
);

Result:

Snapshot Diff:
- First value
+ Second value

  <button
    onClick={[Function mockConstructor]}
  >
-   Hello
+   World
  </button>

[alistairjcbrown]

Did a little digging - it looks like the displaying the mock name is a custom serializer of jest-snapshot
https://github.com/facebook/jest/blob/e760ec40f04042d46c58bf7fd2c8049cbad8abb0/packages/jest-snapshot/src/mock_serializer.ts

Out of the box, the ReactElement plugin of pretty-format (used by jest-diff) doesn't grab the name for jest mock functions - https://github.com/facebook/jest/blob/fa4cbbf87cb3c97fe44f1fee30663715a9dbba71/packages/pretty-format/src/plugins/ReactElement.ts#L37

To support this, we'd need to try and wire in the custom serializer from jest-snapshot/build/mock_serializer