DrMister DrMister - 1 month ago 16
Javascript Question

My jest/enzyme snapshot test passes locally, but fails on my CI

I have a component for which I have a snapshot test in jest. 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 test 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?

Answer

Weirdly, and very unsatisfying this issue resolved itself after a while. I suspect caching on my CI side. How this interfered with yarn I don't know. But currently my tests pass both locally and on my CI.