Components are being rendered as <WrappedComponent> on CI, but not locally

[ismay]

I'm getting different results based on whether I run my snapshot tests on my CI server vs locally. I'm using enzyme and enzyme-to-json to create snapshots. Locally the tests all pass, but when I push them to my remote the CI test fails because it renders the snapshot differently. The test is:

import React from 'react';
import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import GapAnalysis from '../GapAnalysis';

describe('<GapAnalysis />', () => {
  it('renders correctly', () => {
    const wrapper = shallow(
      <GapAnalysis
        versions={[]}
        departments={[]}
        indicators={[]}
        projects={[]}
        relations={[]}
        products={[]}
      />
    );

    expect(shallowToJson(wrapper)).toMatchSnapshot();
  });
});

The output of the failing test is:

Received value does not match stored snapshot 1.

- Snapshot
+ Received

<div>
    <header
      className="header">
      <div>
        <h1
          className="title">
          Edit modus
        </h1>
        <h2
          className="subtitle">
          Analyse Omzet/Kosten 
-         <IconEdit
+         <WrappedComponent
            title="Edit" />
-         <IconInfo
+         <WrappedComponent
            title="Info" />
        </h2>
      </div>
      <div
        className="controls">
-       <Button
+       <WrappedComponent
          text="Opslaan" />
-       <Button
+       <WrappedComponent
          text="Verwijderen" />
      </div>
    </header>
    <div
      className="row">
-     <Card>
-       <CardHeader
+     <WrappedComponent>
+       <WrappedComponent
          title="Compare">
-         <IconInfo
+         <WrappedComponent
            title="Info" />
-       </CardHeader>
-       <CardBody>
+       </WrappedComponent>
+       <WrappedComponent>
          Type: Select
-       </CardBody>
-     </Card>
+       </WrappedComponent>
+     </WrappedComponent>
    </div>
    <div
      className="row">
-     <Card>
-       <CardHeader
+     <WrappedComponent>
+       <WrappedComponent
          title="Grafiek">
-         <IconInfo
+         <WrappedComponent
            title="Info" />
-       </CardHeader>
-       <CardBody>
+       </WrappedComponent>
+       <WrappedComponent>
          Grafieken
-       </CardBody>
-     </Card>
+       </WrappedComponent>
+     </WrappedComponent>
    </div>
  </div>

As you see, the react component names are replaced by WrappedComponent when testing on the CI. What causes this? It should be rendering in exactly the same manner right?

[ismay]

Rendering the snapshot with wrapper.debug() gives me the same error (although the snapshot looks different of course). I assume seems that the WrappedComponent is created by react-redux and connect, but I don't see how it could be influencing this shallow render.

[blainekasten]

Are you using a different jest version locally as to your CI? Just a guess, seems like you are getting a new version of jest on your CI, and an old version locally.

[blainekasten]

Also, this is very much not an enzyme issue. So i'm going to close this issue. We can keep talking about it and i'll try to help. But again, not an enzyme issue.

[ismay]

Ok thanks :). As for the version discrepancy, I'm using yarn (with a yarn.lock) to install my dependencies both locally and on my CI. So it should be completely similar.

But maybe something's being cached, I'll double-check that.

[ismay]

So I found the problem: on my CI server I actually run jest --coverage instead of jest. Apparently that changes the snapshot output when using enzyme-to-json.

Related: jestjs/jest#2007, adriantoine/enzyme-to-json#19