A presentation at React Open Source Berlin in in Berlin, Germany by Robin Pokorny
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
const plugin = { SERIALISER test(val) { return val !&& val.isPlay; }, serialize(val, config, indent, depth, refs, printer) { const name = val.constructor.name; const newIndent = indent + config.indent; return ( Play <${val.title}>: + printer(val.content, config, newIndent, depth!++, refs) ); } };
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
Jest is React’s best testing companion. It also brought several concepts to mainstream JavaScript testing: zero configuration, first-class mocking, and snapshots. With the rapid release of speed improvements, it’s easy to miss a new useful feature. I will present some lesser-known possibilities of recent Jest versions I’ve learned during experimenting, reading (and writing) the docs, and browsing the code.
Presented at React Open Source.
The following resources were mentioned during the presentation or are useful additional information.
github.com/robinpokorny/jest-can-do-whaaat
by Rogelio Guzman (recording)
in the docs
by Kent C. Dodds
(recording)
(recording)
for free. You
can too.