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

Question

I have a asp.net core project created with React template, trying to unit test a simple component with Jest snapshot and I am receiving below error.Can any one suggest how to fix it.

index.js

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

const CloseHistoryButton = ({ onClick }) =>
    <div className="d-flex justify-content-end">
        <Button color="danger" size="sm" onClick={onClick}>
            <FontAwesomeIcon icon="times" /> Close History
        </Button>
    </div>

export default CloseHistoryButton  

CloseHistoryButton.test

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(
                                <CloseHistoryButton />
                                ).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.

Solution 1

In your package.json script which runs the tests append -u to update the snapshot while running the test like react-scripts test -u. This should fix the snapshot test in CI.

Solution 2

Just explicitly pass it in your CI configuration, like:

- yarn test -- --coverage --updateSnapshot

Solution 3

Two solutions to the issue 1) remove cross-env CI=true from package.json OR 2) Setup the CICD to run the unit tests.--- To do this add a npm task within the build pipeline and select the option within the task as "custom" and provide the command as test

that should trigger the unit tests whenever there is a build triggered.

Comments

[Auo]

I had to setup the CICD and that resolved the issue, when i use -u it did not work unfortunately. Two solutions to the issue 1) remove cross-env CI=true from package.json OR 2) Setup the CICD to run the unit tests.

[Yarik]

While it sounds like a great idea to have npm run test update the snapshots automatically, it will make it easy to overwrite broken components and not notice it. Would be better to keep it as a separate command, so if the test fail, you have an opportunity to examine the error.

[Till Kolter]

why would you update a snapshot in CI, this is just so wrong. Failing tests are what CI test builds are made for.

[ImLeo]

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.

[Till Kolter]

Fixing a snapshot without supervision (i.e. through an automatic CI job) is really bad design. Manually updating them is the key. This comment here is correct: stackoverflow.com/questions/59078246/…

[Charkins12]

This solved my problem. I updated my test command in the packages.json that gets built on the server to include a -u to the test command.

[David B]

^ As mentioned by @Yarik what you have done is basically hide the problem. CI is responsible for testing not for manipulating snapshots on the fly. You may as well remove the snapshots.