5

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?

Athanasia
  • 51
  • 3

0 Answers0