I have a series of snapshot tests that pass locally. But on Jenkins, my component seems to be rendering a different snapshot. My tests are:
import { render } from 'enzyme';
import React from 'react';
import Wizard from '../index';
describe('Wizard', () => {
describe('Snapshot tests', () => {
it('Should render the Wizard', () => {
const container = render(<Wizard />);
expect(container).toMatchSnapshot();
});
});
});
My component:
const Wizard = (): JSX.Element => (
<FTWizard
tree={root}
layouts={{
layout1: Layout1,
layout2: Layout2,
layout3: Layout3,
}}
stepsContent={{
layout1: Layout1Content,
layout2: Layout2Content,
layout3: Layout3Content,
}}
/>
);
export default Wizard;
I'm using enzyme to generate the snapshot and my component is using xstate machines. When testing locally everything is fine, but on Jenkins I get the following error:
Stacktrace
Error: expect(received).toMatchSnapshot()
Snapshot name: `Wizard Snapshot tests Should render the Wizard 1`
- Snapshot - 0
+ Received + 4
@@ -82,10 +82,13 @@
>
<div
class="content content"
>
<div
+ class="stack"
+ >
+ <div
class="headingSection"
>
<strong>
What does your network look like?
</strong>
@@ -114,10 +117,11 @@
Show me an example
</span>
</div>
</div>
</span>
+ </div>
</div>
</div>
</div>
</div>
<div
What could be causing the difference between my local and my remote tests?