Enzyme tests fail due to linting in React 16

Question

I'm in the process of upgrading a project to React 16. When I run yarn test many tests now fail due to linting/formatting errors eg

  + expected - actual

             disabled={false}
             name="ticketTime"
             placeholder="Setup instructions.."
             rows={10}
          -  value="Sample text"
          ->
          +  value="Sample text">


...

      -          "label": "one",
      +          "label": "one"
               }
      -      }
      -    >
...

    + expected - actual

           <div>
          -  <h1
          -    key="0"
          -  >
          +  <h1>

Does anyone have any ideas why this is happening and how I can fix the tests?

Answer 1

Based on our conversation in the comments, it sounds like you are using Jest with Enzyme, and probably need to update your snapshots:

jest --updateSnapshot

This will render your HTML per the current code, to reflect any changes, including linting changes, that may make the HTML different, and update the snapshot files.

When your tests run, they inspect the snapshots, and if they aren't up to date, the tests will fail.

https://facebook.github.io/jest/docs/en/snapshot-testing.html

Answer 2

您可以使用以下方法更新快照：

yarn test -- -u