Jest: New snapshot was not written. The update flag must be explicitly passed to write a new snapshot. This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default.

[PAAutofac]

HI All,

I have a simple component for which I am trying to unit test with Jest snapshot and I am receiving below error.Can any one suggest how to fix it.

index.js

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Button } from 'reactstrap'

const CloseHistoryButton = ({ onClick }) =>

Close History

export default CloseHistoryButton

CloseHistoryButton.test

import React from 'react'
import ReactDOM from 'react-dom';
import { shallow, mount, render } from 'enzyme';
import { cleanup } from '@testing-library/react';
import renderer from 'react-test-renderer';
import CloseHistoryButton from '../CloseHistoryButton/index';
import registerIcons from './../../../../icons/registerIcons';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

// automatically unmount and cleanup DOM after the test is finished.
afterEach(cleanup);
registerIcons();
test('renders correctly', () => {
const tree = renderer.create(

).toJSON();
expect(tree).toMatchSnapshot();
});

Error Log:

expect(received).toMatchSnapshot()

New snapshot was not written. The update flag must be explicitly passed to write a new snapshot.

This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default.

Received value
<div
  className="d-flex justify-content-end"
>
  <button
    aria-label={null}
    className="btn btn-danger btn-sm"
    onClick={[Function]}
  >
    <svg
      aria-hidden="true"
      className="svg-inline--fa fa-times fa-w-11 "
      data-icon="times"
      data-prefix="fas"
      focusable="false"
      role="img"
      style={Object {}}
      viewBox="0 0 352 512"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
        fill="currentColor"
        style={Object {}}
      />
    </svg>
     Close History
  </button>
</div>

  27 |                                 <CloseHistoryButton />
  28 |                                 ).toJSON();
> 29 |     expect(tree).toMatchSnapshot();
     |                  ^
  30 | });
  31 |
  32 | describe('Test Button component', () => {

  at Object.toMatchSnapshot (src/features/FleetImport/Results/CloseHistoryButton/CloseHistoryButton.test.js:29:18)

› 1 snapshot failed.
Snapshot Summary
› 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with -u to update them.

Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 failed, 3 passed, 4 total
Snapshots: 1 failed, 1 total
Time: 4.338s
Ran all test suites.
npm ERR! Test failed. See above for more details.

[xargr]

1) Inside the rendered function you need to pass your component.

2) shouldn't run snapshot tests with update during to CI, I suggest you to run the tests locally to produce the .snap files and then put them under the git and running them in CI. Usually it's not allowed to create files in pipelines process, maybe the error poped up from this

[leondeng]

Just explicitly pass it in your CI configuration, like:

• yarn test -- --coverage --updateSnapshot

[tillkolter]

@leondeng Very wrong answer.

[IamManchanda]

The answer by @leondeng works for me

In my package.json scripts I updated my test script and it works for me

"test": "jest tests --coverage --updateSnapshot"

Important note: I was not facing this issue not in react frontend environment but node/graphql backend environment

[stieler-it]

Maybe it makes sense to explain why the answer is considered wrong:

1. Snapshot testing is like a regression test for rendering of components, see here
2. If you run --updateSnapshots in your CI you are basically generating new snapshots instead of comparing to existing ones. This has the same effect as if you would disable the tests.

I think the usual workflow would be to

1. Run the test on your local machine
2. Add the created snapshots to Git
3. CI can run the regression tests