![🃏 Jest
// package.json
"jest": {
"testEnvironment": "node",
"setupFiles": [
"<rootDir>/setup.js"
],
"testRegex": ".*-test.js",
...
}](https://image.slidesharecdn.com/painlessjavascripttestingwithjest-170127100343/85/Painless-JavaScript-Testing-with-Jest-21-320.jpg)
![🃏 Jest
// .babelrc
{
"presets": ["es2015", "react"]
}
$ npm i -D babel-jest
NODE_ENV = "test"](https://image.slidesharecdn.com/painlessjavascripttestingwithjest-170127100343/85/Painless-JavaScript-Testing-with-Jest-23-320.jpg)
![🃏 Jest
"jest": {
"transform": {
".*tsx?$": "<rootDir>/ts-preprocessor.js"
},
"testRegex": ".*.test.(tsx?|jsx?)$”,
"moduleFileExtensions": ["ts", "tsx", "js"]
}](https://image.slidesharecdn.com/painlessjavascripttestingwithjest-170127100343/85/Painless-JavaScript-Testing-with-Jest-25-320.jpg)
![🃏 Jest
exports[`test renders header 1`] = `
<header>
<h1>
Hello, world!
</h1>
</header>
`;
saves a file in sibling __snapshots__ directory:](https://image.slidesharecdn.com/painlessjavascripttestingwithjest-170127100343/85/Painless-JavaScript-Testing-with-Jest-35-320.jpg)
![🃏 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`})
);
});
}](https://image.slidesharecdn.com/painlessjavascripttestingwithjest-170127100343/85/Painless-JavaScript-Testing-with-Jest-49-320.jpg)
![🃏 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);
});](https://image.slidesharecdn.com/painlessjavascripttestingwithjest-170127100343/85/Painless-JavaScript-Testing-with-Jest-52-320.jpg)
Painless JavaScript Testing with Jest
- 1. Michał Pierzchała 🃏 Painless JavaScript Testing
- 2. About me
- 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!
- 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
- 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"] }
- 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!'); });
- 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
- 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
- 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
- 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
- 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