Modern JavaScript Web Development Cookbook

Testing changes with Snapshots

So far, we've been looking at automatic tests for components, events, and actions, so let's end this chapter by considering a testing tool that isn't really a part of TDD, but rather a safeguard against unwanted or unexpected changes after the fact: snapshots. (In TDD, tests would be written before coding the component, but you'll see that this is impossible here.) Snapshot tests work like this: you render a UI component, capture what HTML was produced, and then that is compared to a reference capture that was previously stored. If both captures do not match, either somebody made an unexpected change or the change was actually expected. If this is the case, you'll have to verify that the new capture is correct ...