SlideShare a Scribd company logo
+
+ Unit Tests =
Alin Pandichi
Alin Pandichi
Open space
Coding Dojo
Bucharest Java User Group
Global Day of Coderetreat
Alin Pandichi
Open space
Coding Dojo
Bucharest Java User Group
Global Day of Coderetreat
Software developer @
Mozaic Labs
Building eventriX
Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)
Unit Testing your React / Redux app (@BucharestJS)
Jest:  Capture snapshots of React trees or other 
serializable values to simplify testing and to 
analyze how state changes over time.
describe('Welcome (Snapshot)', () => {
it('Welcome renders hello world', () => {
const json = renderer.create(<Welcome />).toJSON();
expect(json).toMatchSnapshot();
});
});
Enzyme is a JavaScript testing utility for React 
that makes it easier to assert, manipulate, and 
traverse your React Components' output.
Mocha is a JavaScript test framework 
running on Node.js and in the browser.
var assert = require('assert');
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal(-1, [1,2,3].indexOf(4));
});
});
});
Chai ­ assertion library for node and 
the browser that can be paired with any 
javascript testing framework.
expect(foo).to.be.a('string');
expect(foo).to.equal('bar');
expect(foo).to.have.lengthOf(3);
expect(tea).to.have.property('flavors').with.lengthOf(3);
Sinon.js ­ spies, stubs and mocks for 
JavaScript. Works with any unit testing 
framework.
it('makes a GET request for todo items', function () {
sinon.stub(jQuery, 'ajax');
getTodos(42, callbackFunction);
assert(jQuery.ajax.calledWithMatch({
url: '/todo/42/items'
}));
});
Other testing tools: 
● redux­mock­store ­ A mock store for testing 
your redux async action creators and 
middleware. 
● fetch­mock ­ mock http requests made using 
fetch
Istanbul – code coverage tool that works well 
with most JavaScript testing 
frameworks: tap, mocha, AVA, etc.
Unit Testing your React / Redux app (@BucharestJS)
To recap...
● I wouldn’t recommend Jest
● I’d rather use: 
Enzyme + Mocha + Chai + Sinon
● Try to test the ES6 classes rather than 
the React components
To recap...
● Writing tests after production code will 
lead you to “white­box testing”
● Writing tests before production will 
force you to think more about 
component contracts 
Questions?
@alinpandichi
Resources
http://mochajs.org/
http://chaijs.com/
http://sinonjs.org/
http://airbnb.io/enzyme/
https://istanbul.js.org/
https://github.com/arnaudbenard/redux­mock­store
http://www.wheresrhys.co.uk/fetch­mock/
https://facebook.github.io/jest/
Image resources
http://diysolarpanelsv.com/images/arrow­with­heart­in­middle­clipart­16.png
https://i1.wp.com/www.tugberkugurlu.com/Content/images/Uploadedbyauthors/w
http://1.bp.blogspot.com/­pkJqNgkmRe4/Tz0k6JUwJMI/AAAAAAAAAhU/h8byzSXB
http://paulocoelhoblog.com/wp­content/uploads/2012/06/IsayNO1.jpg

More Related Content

What's hot (20)

ODP
Gatling - Stress test tool
Knoldus Inc.
 
PDF
Testing with Codeception
Jeremy Coates
 
PDF
Automated Testing in Angular Slides
Jim Lynch
 
PDF
[FullStack NYC 2019] Effective Unit Tests for JavaScript
Hazem Saleh
 
PPTX
Automated Testing using JavaScript
Simon Guest
 
PPTX
JavaScript Metaprogramming with ES 2015 Proxy
Alexandr Skachkov
 
PDF
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
Codemotion
 
PPTX
Test driving QML
Artem Marchenko
 
PPTX
Lets cook cucumber !!
vodQA
 
PDF
Никита Галкин "Testing in Frontend World"
Fwdays
 
PDF
Unit-testing and E2E testing in JS
Michael Haberman
 
PPTX
Unit testing hippo
Ebrahim Aharpour
 
ODP
Gatling
Gaurav Shukla
 
PPTX
Angular UI Testing with Protractor
Andrew Eisenberg
 
PPTX
Automation using Javascript
khanhdang1214
 
PDF
Karate, the black belt of HTTP API testing?
Bertrand Delacretaz
 
PDF
Create an architecture for web test automation
Elias Nogueira
 
PDF
Efficient JavaScript Unit Testing, May 2012
Hazem Saleh
 
PDF
Insights on Protractor testing
Dejan Toteff
 
PDF
prohuddle-utPLSQL v3 - Ultimate unit testing framework for Oracle
Jacek Gebal
 
Gatling - Stress test tool
Knoldus Inc.
 
Testing with Codeception
Jeremy Coates
 
Automated Testing in Angular Slides
Jim Lynch
 
[FullStack NYC 2019] Effective Unit Tests for JavaScript
Hazem Saleh
 
Automated Testing using JavaScript
Simon Guest
 
JavaScript Metaprogramming with ES 2015 Proxy
Alexandr Skachkov
 
Carmen Popoviciu - Protractor styleguide | Codemotion Milan 2015
Codemotion
 
Test driving QML
Artem Marchenko
 
Lets cook cucumber !!
vodQA
 
Никита Галкин "Testing in Frontend World"
Fwdays
 
Unit-testing and E2E testing in JS
Michael Haberman
 
Unit testing hippo
Ebrahim Aharpour
 
Gatling
Gaurav Shukla
 
Angular UI Testing with Protractor
Andrew Eisenberg
 
Automation using Javascript
khanhdang1214
 
Karate, the black belt of HTTP API testing?
Bertrand Delacretaz
 
Create an architecture for web test automation
Elias Nogueira
 
Efficient JavaScript Unit Testing, May 2012
Hazem Saleh
 
Insights on Protractor testing
Dejan Toteff
 
prohuddle-utPLSQL v3 - Ultimate unit testing framework for Oracle
Jacek Gebal
 

Similar to Unit Testing your React / Redux app (@BucharestJS) (20)

ODP
How to unit test your React/Redux app
Alin Pandichi
 
PDF
JS Lab`16. Сергей Селецкий: "Ретроспектива тестирования JavaScript"
GeeksLab Odessa
 
PPTX
JCConf2019: Next Step of JavaScript on Java
Takaaki Sugiyama
 
PDF
NoSQL and JavaScript: a love story
Alexandre Morgaut
 
PDF
Web UI test automation instruments
Artem Nagornyi
 
PDF
Rxjava 介紹與 Android 中的 RxJava
Kros Huang
 
PDF
Java EE 7, what's in it for me?
Alex Soto
 
ODP
JUDCON India 2014 Java EE 7 talk
Vijay Nair
 
PPTX
Rx java in action
Pratama Nur Wijaya
 
PDF
Full Stack Scala
Ramnivas Laddad
 
PDF
Integrating React.js Into a PHP Application
Andrew Rota
 
PDF
Devoxx UK 2013 Test-Driven Development with JavaEE 7, Arquillian and Embedded...
Peter Pilgrim
 
PDF
AMIS Oracle OpenWorld 2013 Review Part 3 - Fusion Middleware
Getting value from IoT, Integration and Data Analytics
 
PPTX
Reactive Extensions for JavaScript
Jim Wooley
 
PDF
Javascript Unit Testing
Tom Van Herreweghe
 
PDF
Reactive programming and RxJS
Ravi Mone
 
PDF
The Making of the Oracle R2DBC Driver and How to Take Your Code from Synchron...
VMware Tanzu
 
PDF
Fast Web Applications Development with Ruby on Rails on Oracle
Raimonds Simanovskis
 
PPTX
Java 7 Whats New(), Whats Next() from Oredev
Mattias Karlsson
 
PDF
Oscon2007 Windmill
oscon2007
 
How to unit test your React/Redux app
Alin Pandichi
 
JS Lab`16. Сергей Селецкий: "Ретроспектива тестирования JavaScript"
GeeksLab Odessa
 
JCConf2019: Next Step of JavaScript on Java
Takaaki Sugiyama
 
NoSQL and JavaScript: a love story
Alexandre Morgaut
 
Web UI test automation instruments
Artem Nagornyi
 
Rxjava 介紹與 Android 中的 RxJava
Kros Huang
 
Java EE 7, what's in it for me?
Alex Soto
 
JUDCON India 2014 Java EE 7 talk
Vijay Nair
 
Rx java in action
Pratama Nur Wijaya
 
Full Stack Scala
Ramnivas Laddad
 
Integrating React.js Into a PHP Application
Andrew Rota
 
Devoxx UK 2013 Test-Driven Development with JavaEE 7, Arquillian and Embedded...
Peter Pilgrim
 
AMIS Oracle OpenWorld 2013 Review Part 3 - Fusion Middleware
Getting value from IoT, Integration and Data Analytics
 
Reactive Extensions for JavaScript
Jim Wooley
 
Javascript Unit Testing
Tom Van Herreweghe
 
Reactive programming and RxJS
Ravi Mone
 
The Making of the Oracle R2DBC Driver and How to Take Your Code from Synchron...
VMware Tanzu
 
Fast Web Applications Development with Ruby on Rails on Oracle
Raimonds Simanovskis
 
Java 7 Whats New(), Whats Next() from Oredev
Mattias Karlsson
 
Oscon2007 Windmill
oscon2007
 
Ad

More from Alin Pandichi (12)

PDF
[Codecamp] The sorry state of frontend code
Alin Pandichi
 
ODP
Coding Dojo - The learning remote control
Alin Pandichi
 
PDF
The sorry state of frontend code [a talk @ Softbinator]
Alin Pandichi
 
PDF
Behavior driven development - a recap (@ Symfony Bucharest Meetup)
Alin Pandichi
 
PDF
The sorry state of frontend code
Alin Pandichi
 
PDF
Covariance and contravariance. Say what?! (Agile Talks #22)
Alin Pandichi
 
PDF
Coding Dojo - Berlin Clock - TDD
Alin Pandichi
 
PDF
Coding Dojo - Golden Master Technique - Approval Tests - Gilded Rose Kata-
Alin Pandichi
 
ODP
Coding Dojo - Refactoring Tennis Kata
Alin Pandichi
 
PDF
Avatar.js
Alin Pandichi
 
PDF
Software development - the java perspective
Alin Pandichi
 
PDF
Java 8 - Lambdas and much more
Alin Pandichi
 
[Codecamp] The sorry state of frontend code
Alin Pandichi
 
Coding Dojo - The learning remote control
Alin Pandichi
 
The sorry state of frontend code [a talk @ Softbinator]
Alin Pandichi
 
Behavior driven development - a recap (@ Symfony Bucharest Meetup)
Alin Pandichi
 
The sorry state of frontend code
Alin Pandichi
 
Covariance and contravariance. Say what?! (Agile Talks #22)
Alin Pandichi
 
Coding Dojo - Berlin Clock - TDD
Alin Pandichi
 
Coding Dojo - Golden Master Technique - Approval Tests - Gilded Rose Kata-
Alin Pandichi
 
Coding Dojo - Refactoring Tennis Kata
Alin Pandichi
 
Avatar.js
Alin Pandichi
 
Software development - the java perspective
Alin Pandichi
 
Java 8 - Lambdas and much more
Alin Pandichi
 
Ad

Recently uploaded (20)

PDF
Draugnet: Anonymous Threat Reporting for a World on Fire
treyka
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PDF
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PPTX
Wondershare Filmora Crack Free Download 2025
josanj305
 
PDF
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
PPTX
Securing Model Context Protocol with Keycloak: AuthN/AuthZ for MCP Servers
Hitachi, Ltd. OSS Solution Center.
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
PDF
Modern Decentralized Application Architectures.pdf
Kalema Edgar
 
PDF
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
PDF
Pipeline Industry IoT - Real Time Data Monitoring
Safe Software
 
PDF
TrustArc Webinar - Navigating APAC Data Privacy Laws: Compliance & Challenges
TrustArc
 
PPTX
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
PDF
FME in Overdrive: Unleashing the Power of Parallel Processing
Safe Software
 
PDF
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
PDF
How to Comply With Saudi Arabia’s National Cybersecurity Regulations.pdf
Bluechip Advanced Technologies
 
PDF
Bitkom eIDAS Summit | European Business Wallet: Use Cases, Macroeconomics, an...
Carsten Stoecker
 
PDF
🚀 Let’s Build Our First Slack Workflow! 🔧.pdf
SanjeetMishra29
 
PDF
Kubernetes - Architecture & Components.pdf
geethak285
 
Draugnet: Anonymous Threat Reporting for a World on Fire
treyka
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Wondershare Filmora Crack Free Download 2025
josanj305
 
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
Securing Model Context Protocol with Keycloak: AuthN/AuthZ for MCP Servers
Hitachi, Ltd. OSS Solution Center.
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Modern Decentralized Application Architectures.pdf
Kalema Edgar
 
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
Pipeline Industry IoT - Real Time Data Monitoring
Safe Software
 
TrustArc Webinar - Navigating APAC Data Privacy Laws: Compliance & Challenges
TrustArc
 
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
FME in Overdrive: Unleashing the Power of Parallel Processing
Safe Software
 
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
How to Comply With Saudi Arabia’s National Cybersecurity Regulations.pdf
Bluechip Advanced Technologies
 
Bitkom eIDAS Summit | European Business Wallet: Use Cases, Macroeconomics, an...
Carsten Stoecker
 
🚀 Let’s Build Our First Slack Workflow! 🔧.pdf
SanjeetMishra29
 
Kubernetes - Architecture & Components.pdf
geethak285
 

Unit Testing your React / Redux app (@BucharestJS)