String for mocks looks weird

[eskimoblood]

I use Jest to mock out some child components, with the react-test-renderer I got

<mocked someProps="someString" />

using enzyme and shallowToJson I got:

<function (props) {return (/* istanbul ignore next */_react2.default.createElement( /* istanbul ignore next */'mocked', /* istanbul ignore next */_extends({ originalComponent: componentName }, props), props.children));} someProps="someString" />

Do you think its possible to recognise mocks and render they just like the react-test-renderer.

[adriantoine]

Hi, thanks for raising the bug, I will have a look!

[adriantoine]

@eskimoblood Can you give me more details about your test? How exactly are you mocking the component?

[adriantoine]

In one of my project, I'm using enzyme-to-json and Jest mocking like that:

jest.mock('../Field', () => {
    return function Field(props) {
        return props.children;
    };
});

and it works fine with Field as a display name.

But I'm interested in your issue, can you provide more details?

[eskimoblood]

I'm using the approach from thus gist

[eskimoblood]

But let me try your approach, maybe this fix the problem.

[adriantoine]

Cool, thanks for the link, I'm looking at it!

[adriantoine]

Ok so I've just tried that (basically just copying from your link):

function mockComponent(componentName) {
    return props => {
        return (
            <mocked originalComponent={componentName} {...props}>{props.children}</mocked>
        );
    };
}

jest.mock('./fixtures/mocked-component', () => { return mockComponent('Icon'); });

import MockedComponent from './fixtures/mocked-component';

it('converts a mocked component', () => {
    const shallowed = shallow(
        <MockedComponent className="class"><strong>Hello!</strong></MockedComponent>
    );
    expect(shallowToJson(shallowed)).toMatchSnapshot();
});

and the snapshot output is:

exports[`test converts a mocked component 1`] = `
<mocked
  className="class"
  originalComponent="Icon">
  <strong>
    Hello!
  </strong>
</mocked>
`;

which seems ok 🤔

[bsr203]

I too had transpiled code in my snapshot even with react-test-renderer jestjs/jest#1756

though it is closed, @cpojer acknowledge it was reported by others too.

[eskimoblood]

I just move to

jest.mock('../../components', () => {
  return {
    TextField: () => 'TextField',
    DatePicker: () => 'DatePicker'
  }
});

as suggested in the comments of the gist and it works. So just close the issue. Thanks for your help.

[adriantoine]

Ok thanks for the insight @bsr203, that's strange 🤔

@eskimoblood I'm glad it works with you 😊 I'm still curious of what was causing that.