Upload
stbaechler
View
505
Download
2
Embed Size (px)
Citation preview
React Testing
ES6 = ES2015
Agenda
1. Static code analysis
2. Jest
Simon Bächler
Web developer at Feinheit
Testing
What tool do you use to test your JavaScript?
http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
Static code analysis
Style checking and linting
Pluggable linting rules
Supports ES2015
Supports JSX
Autofix option ESLint
var foo = bar;
eslint —init
Test Framework
Built on top of Jasmine
Developed by Facebook
Supports React out of the box
Mock by default
fake DOM
0.12
No support for Node.js 0.12
Jest >= 0.5.2 supports Node 4
Behavior drivenjest.dontMock(‚../sum');
describe('sum', function() { it('adds 1 + 2 to equal 3', function() { var sum = require(‚../sum'); expect(sum(1, 2)).toBe(3); });});
Component under test
Mock object JSON fixture
StateDependency
Mocks
Dependency
(Default Mock)
dependency.foo(bar)
undefinedComponent under test
Jest
expect(dependency.foo).toBeCalled()
expect(dependency.foo).lastCalledWith(bar)
expect(dependency.foo).not.toBeCalledWith(baz)
doSomething(bar)
Let’s look at some code
Jest runs in Node.js• No window object, no LocalStorage• No debugging (there is a workaround)• 'npm test'• node-debug --nodejs --harmony
node_modules/.bin/jest --runInBand
More Jest functionality
• Test asynchronous calls• Spy on non-mocked objects and methods• Timer mocks• Regex matcher• Partial matchers• Setup and teardown methods
System TestsSelenium Web Driver
Remote control a Browser
Supports Chrome, Firefox, IE, Edge and PhantomJS
Also iOs and Android (with Appium)
But this is another talk.
–Jacob Kaplan-Moss
„Code without tests is broken by design.“
END OF PART I