Jest is a complete testing platform for your JavaScript applications, released by Facebook as an open source software.

1. Michał Pierzchała
🃏 Painless JavaScript Testing

2. About me

3. xfive.co jest-core@thymikee

4. Reintroducing

5. Jest
🃏 Painless JavaScript Testing

6. 🃏 Jest

7. 🃏 Jest
You’ve probably heard
about it centuries* ago
* in WST – Web Standard Time

8. 🃏 Jest
0
15
30
45
60
2014 VII 2015 I 2016 VI 2016 I 2017
Awesomeness
meh
not bad nice!

9. 🃏 Jest
Painless, right?

10. 🃏 Jest
“Simple things should be simple,
complex things should be possible”
~ Alan Kay

11. 🃏 Jest
Complete
Testing Platform
easy to setup
configurable
familiar syntax
babel-friendly
meaningful error messages
smart watch-mode
fast
efficient
testing DOM
snapshot testing
sandboxed & parallel tests
built-in coverage
built-in mocking
async tests
compile-to-JS-friendly

12. 🃏 Jest
"
Easy to setup

13. 🃏 Jest
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
}
$ npm i -D jest

14. 🃏 Jest
├── __tests__
│ └── component.spec.js
│ └── anything.js
├── package.json
├── foo.test.js
├── bar.spec.js
└── component.js
will treat these files as tests:

15. 🃏 Jest

16. 🃏 Jest
Familiar syntax
Jest uses Jasmine as a test runner
but it does so much more around it

17. 🃏 Jest
// some.test.js
beforeEach(runBefore);
afterAll(runAfterAll);
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
expect(object).not.toBeTruthy();
});

18. 🃏 Jest
Convenient test
status reporter

19. 🃏 Jest

20. 🃏 Jest
Configurable

21. 🃏 Jest
// package.json
"jest": {
"testEnvironment": "node",
"setupFiles": [
"<rootDir>/setup.js"
],
"testRegex": ".*-test.js",
...
}

22. 🃏 Jest
Babel-friendly
Jest reads your .babelrc
and package.json

23. 🃏 Jest
// .babelrc
{
"presets": ["es2015", "react"]
}
$ npm i -D babel-jest
NODE_ENV = "test"

24. 🃏 Jest
Works with any
compile-to-JS language
TypeScript for example!

25. 🃏 Jest
"jest": {
"transform": {
".*tsx?$": "<rootDir>/ts-preprocessor.js"
},
"testRegex": ".*.test.(tsx?|jsx?)$”,
"moduleFileExtensions": ["ts", "tsx", "js"]
}

26. 🃏 Jest
🃏
CUTENESS
BREAK

27. 🃏 Jest
Testing DOM
Jest uses jsdom to fake it

28. 🃏 Jest
const $ = require('jquery');
const handleButtonClick =
require('../handleButtonClick');
it('displays a user after a click', () => {
document.body.innerHTML =
'<button id="button" />';
handleButtonClick();
$('#button').click();
expect($('#button').text())
.toEqual('Button Clicked!');
});

29. 🃏 Jest
Async tests

30. 🃏 Jest
const user = require('./user');
test('works with async/await', async () => {
const name = await user.getUserName(42);
expect(name).toEqual('Arnold');
});
use async/await

31. 🃏 Jest
const user = require('./user');
test('works with async/await', () => {
return user.getUserName(42).then(name => {
expect(name).toEqual('Arnold')
});
});
or return a Promise

32. 🃏 Jest
const user = require('./user');
test('works with async/await', (done) => {
user.getUserName(42).then(name => {
expect(name).toEqual('Arnold');
done();
}).catch(done.fail);
});
or call done() / done.fail()

33. 🃏 Jest
📸
Snapshot tests
Literally saving a snapshot of any serialisable value
e.g. a React component

34. 🃏 Jest
import React from 'react';
import Header from '../Header';
import renderer from 'react-test-renderer';
test('renders header', () => {
const component = renderer.create(
<Header title="Hello, world!" />
);
expect(component).toMatchSnapshot();
});

35. 🃏 Jest
exports[`test renders header 1`] = `
<header>
<h1>
Hello, world!
</h1>
</header>
`;
saves a file in sibling __snapshots__ directory:

36. 🃏 Jest

37. 🃏 Jest
• React & ReactNative components
• Objects shape (e.g. Redux)
• CLI output
• Changes in time
• GraphQL queries
• DB shape (e.g. Mongoose)
• so much more…
snapshots are great for testing:

38. 🃏 Jest
• user attention while updating/validating is required
• one must be sure that snapshot output is valid
• updating particular snapshots is not super convenient (yet)
but be aware of pitfalls

39. 🃏 Jest
use responsibly

40. 🃏 Jest
Fast & efficient
Jest runs tests in parallel on all available cores
Caches test results and babel transforms
Runs errored tests first.

41. 🃏 Jest
Sandboxed
each test has its own virtual environment

42. 🃏 Jest
These test suites run
in parallel sandboxes

43. 🃏 Jest
Meaningful Error
Messages

44. 🃏 Jest

45. 🃏 Jest
Built-in coverage reporter

46. 🃏 Jest
$ jest --coverage

47. 🃏 Jest
Built-in mocking
Jest features so called
manual mocks and a mocking functions

48. 🃏 Jest
manual mocks
reside in __mocks__ directory
├── __mocks__
│ └── fs.js
├── __tests__
├── models
│ └── __mocks__
│ └──── user.js
│ └── user.js
└── component.js

49. 🃏 Jest
sample implementation of __mocks__/request.js
'use strict';
const users = {
4: {name: 'Pablo'},
};
export default function request(url) {
return new Promise((resolve, reject) => {
const userID = parseInt(
url.substr('/users/'.length), 10
);
process.nextTick(
() => users[userID]
? resolve(users[userID])
: reject({error: `${userID} not found`})
);
});
}

50. 🃏 Jest
substitute all calls to request
from any module
with implementation from __mocks__
jest.mock('../request');

51. 🃏 Jest
jest.mock can also be implemented in-place
jest.mock('any-module', () => 42);
jest.mock('fake', () => false, {virtual: true});

52. 🃏 Jest
mock functions with jest.fn()
test('mocks', () => {
const mockFn = jest.fn(() => 1337);
const test = new mockFn(); // first call
expect(mockFn).toHaveBeenCalled();
mockFn('first arg', 'second arg’); // second call
expect(mockFn.mock.calls[1][0]).toBe('first arg');
expect(mockFn.mock.calls[1][1]).toBe('second arg');
expect(mockFn.mock.instances.length).toBe(2);
expect(mockFn.mock.instances[0]).toEqual(test);
expect(mockFn()).toBe(1337);
});

53. 🃏 Jest
Built-in matchers library
and they are extendable

54. 🃏 Jest
• ongoing efforts for full compatibility with
popular expect package
• asymmetric matchers (adapted from Jasmine)
• mocks and spies
• expect.extend() API

55. 🃏 Jest
Behold
watch mode
😵

56. 🃏 Jest
• fast 🚀 (even faster in v19)
• can run tests related to changed files
(git & mercurial)
• pattern mode
• interrupting
• TDD-friendly

57. 🃏 Jest

58. 🃏 Jest

59. 🃏 Jest
Editor integrations

60. 🃏 Jest
vscode-jest by @orta

61. 🃏 Jest
atom-jest in the making by @kentaromiura

62. 🃏 Jest
I think I covered
most of the features
but there’s so much more! ✨

63. 🃏 Jest
Want to try Jest now?
https://repl.it/languages/jest

64. 🃏 Jest
Migrating to Jest?
$ npm i -g jest-codemods
Jasmine, Mocha, AVA, chai and Tape covered

65. 🃏 Jest
Thank you.