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

Oh Snap!

Oh Snap!

Gaining leverage over legacy CLI apps with snapshot testing

Dan Miller

July 06, 2017
Tweet

More Decks by Dan Miller

Other Decks in Programming

Transcript

  1. Oh Snap! Gaining leverage over legacy CLI apps with snapshot

    testing Dan Miller Rogue Software Engineer @jazzdan https://dmiller.io
  2. 1 test("Link renders correctly", () => { 2 const tree

    = renderer 3 .create(<Link page="http://queensjs.com"> 4 Queens JS</Link>) 5 .toJSON(); 6 expect(tree).toMatchSnapshot(); 7 });
  3. PASS ./Link.test.js ✓ renders correctly (15ms) Snapshot Summary › 1

    snapshot written in 1 test suite. Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 1 added, 1 total Time: 0.287s Ran all test suites related to changed files.
  4. 1 exports[`Link renders correctly 1`] = ` 2 <a 3

    className="normal" 4 href="http://queensjs.com" 5 onClick={[Function bound _onClick]}> 6 Queens JS 7 </a> 8 `;
  5. // ... const toMatchSnapshot = function(received: any, testName?: string) {

    this.dontThrow && this.dontThrow(); const {currentTestName, isNot, snapshotState}: MatcherState = this; if (isNot) { throw new Error('Jest: `.not` cannot be used with `.toMatchSnapshot()`.'); } if (!snapshotState) { throw new Error('Jest: snapshot state must be initialized.'); } const result = snapshotState.match( testName || currentTestName || '', received, );
  6. class SnapshotState { _counters: Map<string, number>; _dirty: boolean; _index: number;

    _updateSnapshot: SnapshotUpdateState; _snapshotData: {[key: string]: string}; _snapshotPath: Path; _uncheckedKeys: Set<string>; added: number; expand: boolean; matched: number; unmatched: number; updated: number; }