testing react applications

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