Jest can do whaaat?

JEST can do whaaat? @robinpokorny React Open Source Berlin 1 November 2017

INFO Slides accompany a talk. Here, the talk is missing. For the full experience see the recording. I welcome any feedback!

WHAT IS JEST delightful, zero configuration testing platform Jasmine’s and Expect’s successor practical utilities for awesome DX http://facebook.github.io/jest/

SNAPSHOT TESTING

describe(‘method’, () !=> { test(‘works’, () !=> { const full = { number: 1975, bool: true, string: ‘Hello, Vanek’, promise: Promise.resolve(‘Better job’), symbol: Symbol(‘brewery’), [Symbol.for(‘brewmaster’)]: ‘Next beer!’, … }; expect(full).toMatchSnapshot(); expect(1936).toMatchSnapshot(); }); }); TEST

!// Jest Snapshot v1, https:!//goo.gl/fbAQLP exports[method works 1] = Object { "bool": true, … "undefined": undefined, Symbol(brewmaster): "Next beer!", }; exports[method works 2] = 1936; SNAPSHOT

` Object { “bool”: true, “func”: [Function], “map”: Map { “position1” !=> “workman”, “position2” !=> “stockkeeper”, }, “null”: null, “number”: 1975, “promise”: Promise {}, SNAPSHOT

SNAPSHOT } ` “set”: Set { “think”, “write”, “snitch”, }, “string”: “Hello, Vanek”, “symbol”: Symbol(brewery), “undefined”: undefined, Symbol(brewmaster): “Next beer!”,

describe(‘method’, () !=> { test(‘works’, () !=> { const full = { … }; TEST expect(full).toMatchSnapshot(‘new name’); }); }); SNAPSHOT exports[new name 1] = …

test(‘mock function’, () !=> { const fn = jest.fn(); TEST fn(‘Vanek’); fn(‘Ferdinand’, ‘Vanek’); expect(fn).toHaveBeenCalledWith(‘Vanek’); expect(fn).toHaveBeenCalledWith(‘Ferdinand’, ‘Vanek’); expect(fn).toHaveBeenCalledTimes(2); !// vs expect(fn.mock.calls).toMatchSnapshot(); });

exports[method mock function 1] = Array [ Array [ "Vanek", ], Array [ "Ferdinand", "Vanek", ], ]; SNAPSHOT

?

exports[component with defaults] = ` <div style={ Object { “backgroundColor”: “black”, “display”: “flex”, “flexDirection”: “column”, } }> <h1> … SNAPSHOT

TEST expect(Immutable.Map({ a: 1, b: 2 })).toMatchSnapshot(); exports[method immutable 1] = Immutable.Map { "a": 1, "b": 2, }; SNAPSHOT

expect.addSnapshotSerializer(plugin); or // package.json { … “jest”: { “snapshotSerializers”: [“plugin.js”] } } SERIALISER

test(‘play’, () !=> { const play = { isPlay: true, title: ‘Audience’, content: { scenes: 1 } }; expect([ play ]).toMatchSnapshot(); }); TEST

SNAPSHOT exports[method play 1] = Array [ Play <Audience>: Object { "scenes": 1, }, ];

TEST test(‘diff’, () !=> { const play = { title: ‘Audience’, characters: 2 }; expect(play).toMatchSnapshot(); expect({ !!…play, characters: 3 }).toMatchSnapshot(); });

exports[diff 1] = Object { "characters": 2, "title": "Audience", }; exports[diff 2] = Object { "characters": 3, "title": "Audience", }; SNAPSHOT

const { toMatchDiffSnapshot } = require(‘snapshot-diff’); expect.extend({ toMatchDiffSnapshot }); test(‘diff’, () !=> { const play = { title: ‘Audience’, characters: 2 }; expect(play) .toMatchDiffSnapshot({ !!…play, characters: 3 }); });

exports[diff 1] = "Snapshot Diff: - First value + Second value Object { !\\"characters!\\": 2, + !\\"characters!\\": 3, !\\"title!\\": !\\"Audience!\\", }"; SNAPSHOT

TDD ✖ SNAPSHOTS algorithms structures write before concurrent or after part whole inside codebase

watch

$ jest !—watch $ npm test !— !—watch

understands dependencies filter by Path or Test name Update snapshots failed re-run first

!// moduleA.spec.js const moduleA = require(‘./moduleA’); test(‘moduleA’, () !=> { expect(moduleA()).toBe(true); }); !// moduleA.js const moduleB = require(‘./moduleB’); DEPS

ASYNC in JEST testing

CALLBACK test(‘promise’, done !=> { Promise.resolve(7) .then(n !=> { expect(n).toBe(7); }) .then(done) .catch(done.fail); });

test(‘promises’, () !=> { Promise.resolve(8).then(n !=> { expect(n).toBe(7); }); return Promise.resolve(7).then(n !=> { expect(n).toBe(7); }); }); PROMISES

test(‘reject’, () !=> { return Promise.reject(0).catch(n !=> { expect(n).toBe(0); }); }); REJECTION

test(‘reject’, () !=> { return Promise.reject(0).catch(n !=> { expect(n).toBe(0); }); }); test(‘reject’, () !=> { return Promise.resolve(7).catch(n !=> { expect(n).toBe(0); }); }); REJECTION

test(‘reject’, () !=> { expect.assertions(1); return Promise.resolve(7) .then(() !=> { throw new Error(‘Not rejected!’); }) .catch(n !=> { expect(n).toBe(0); }); }); REJECTION

test(‘async’, async () !=> { const n = await Promise.resolve(7) const m = await Promise.resolve(42) expect(n).toBe(7) expect(m).toBe(42) }) ASYNC AWAIT

test(‘async’, async () !=> { const n = Promise.resolve(7) const m = await Promise.resolve(42) expect(n).toBe(7) expect(m).toBe(42) }) ASYNC AWAIT

test(‘async rejection’, async () !=> { try { await Promise.reject(0); } catch (e) { expect(e).toBe(0); } }); ASYNC REJECTION

test(‘async rejection’, async () !=> { try { await Promise.resolve(7); } catch (e) { expect(e).toBe(0); } }); ASYNC REJECTION

test(‘async rejection’, async () !=> { try { await Promise.resolve(0); expect(true).toBe(false); } catch (e) { expect(e).toBe(0); } }); ASYNC REJECTION

.RESOLVES & .REJECTS test(‘resolves/rejects’, async () !=> { await expect(Promise.resolve(7)).resolves.toBe(7); await expect(Promise.reject(0)).rejects.not.toBe(7); });

JEST can do will do whaaat?

test(‘mockName’, () !=> { const mockFn = jest.fn(); expect(mockFn).toHaveBeenCalled(); }); MOCK NAME

test(‘mockName’, () !=> { const mockFn = jest.fn(); MOCK NAME expect(mockFn).toHaveBeenCalled(); }); test(‘mockName’, () !=> { const mockFn = jest.fn().mockName(‘mockedFunction’); expect(mockFn).toHaveBeenCalled(); });

INFO GIF not supported in PDF

$ jest packages/moduleA $ jest packages/moduleA !—passWithNoTests

INFO GIF not supported in PDF by @kentcdodds

RELATED • • • • • • • github.com/robinpokorny/jest-can-do-whaaat Jest Snapshots and Beyond by Rogelio Guzman (recording) Writing snapshot plugins in the docs Effective Snapshot Testing by Kent C. Dodds Async testing in Jest (recording) Snapshot testing in Jest (recording) Async testing Koa with Jest INFO Full links in the description

Help others to go JEST can do whaaat? @robinpokorny