Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Snapshot Testing: Going beyond UI

Snapshot Testing: Going beyond UI

Snapshot-based testing re-gained its popularity in front-end development with Enzyme and Jest projects. It became a handy way of testing complex UI components representation.

In this talk, I want to show a little bit of history and philosophy behind snapshot based testing. Its usage does not only apply to UI components but also HTTP API's and legacy systems.

Alexander Beletsky

June 22, 2018

More Decks by Alexander Beletsky

Other Decks in Programming


  1. Alexander Beletsky Ph.D, Software Engineer, Lead Architect at blogfoster GmbH

    http://beletsky.net https://github.com/alexbeletsky @alexbeletsky
  2. Let the machine perform the computation, but leave a human

    to make a decision if this computation is right.
  3. It all comes to understanding the state of the system

    and the representation of this state (output of system).
  4. STATE REPRESENTATION front-end people In case of Redux-based applications, the

    state is actual Redux state. For else, it’s typically set of models. The UI rendered by Browser (HTML / CSS / JS)
  5. STATE REPRESENTATION back-end people Any kind of database and server

    business logic that process the data JSON / HTML / XML (or any other) Server response
  6. STATE REPRESENTATION mobile people The model or set of models,

    initialized from server or local storages The UI rendered by mobile platform (iOS, Android)
  7. The most important to make the concept work, is being

    able to “freeze” the state and get the as full as representation of the system as possible.
  8. const R = f (State); expect(R.serialize()).toMatchSnapshot(); * the only 2

    lines of code in this presentation ** and yes, I’m using semicolons in JS
  9. The representation of the system’s state should be serialized into

    some appropriate format, could be anything that satisfies couple of properties..
  10. It should be, Diffable for machines so if there is

    change between two different snapshots, the machine able to detect difference.
  11. It should be, Readable for humans so if there is

    change occurred, human is able to understand it and say if it’s right or not
  12. STATE REPRESENTATION MongoDB with `.invoices` collection to store invoices documents

    + incoming query parameters HTML/PDF of the invoice, served by /v1/invoices/{id}.html endpoint /v1/invoices/447.html?lang=de +
  13. }

  14. 2. FOCUS ON BEHAVIOR OF THE SYSTEM With snapshot you

    have to run full integration test, many parts of the system involved.
  15. 3. SNAPSHOTS AS PART OF PULL REQUEST Seeing a change

    to snapshot during review of code changes is a great benefit.