Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Unit Testing React & Redux

668 views

Published on

Presentation from the 2016 MojoTech React Symposium. Covers how to unit test React Components and Redux.

Published in: Software
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/L1ODi ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Unit Testing React & Redux

  1. 1. Unit Testing React & Redux Dylan Kirby Slides: github.com/djkirby/react-symposium-unit-testing
  2. 2. - What is unit testing, benefits - Automated javascript testing - Unit testing redux - Unit testing React components - Real world examples - Visual testing (Storybook) - Resources Overview
  3. 3. - What is unit testing, benefits - Automated javascript testing - Unit testing redux - Unit testing React components - Real world examples - Visual testing (Storybook) - Resources
  4. 4. What is Unit Testing
  5. 5. https://www.youtube.com/watch?v=kkqArkYV4fw
  6. 6. - What is unit testing, benefits - Automated javascript testing - Unit testing redux - Unit testing React components - Real world examples - Visual testing (Storybook) - Resources
  7. 7. setup -> exercise -> verify -> teardown http://www.agile-code.com/blog/the-anatomy-of-a-unit-test/
  8. 8. chai
  9. 9. - What is unit testing, benefits - Automated javascript testing - Unit testing redux - Unit testing React components - Real world examples - Visual testing (Storybook) - Resources
  10. 10. Testing redux action creators
  11. 11. Testing redux reducers
  12. 12. - What is unit testing, benefits - Automated javascript testing - Unit testing redux - Unit testing React components - Real world examples - Visual testing (Storybook) - Resources
  13. 13. Unit Testing React Components - Check it renders as expected given certain props/state - Check it handles interactions as expected - React addons test utils - Enzyme
  14. 14. React Addons Test Utils - Simulate events - Render component into DOM - Shallow render
  15. 15. - JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output - Uses React test utilities, provides different interface to reduce boilerplate - jQuery-like syntax - Shallow rendering, full DOM rendering - Guides for using w/ different test runners Enzyme
  16. 16. Chai.js assertions and convenience functions for testing React Components with enzyme chai-enzyme
  17. 17. Shallow Rendering at(index) childAt() children() closest(selector) contains(nodeOrNodes) context([key]) debug() equals(node) every(selector) everyWhere(predicate) filter(selector) filterWhere(predicate) find(selector) findWhere(predicate) first() forEach(fn) get(index) hasClass(className) html() instance() is(selector) last() map(fn) not(selector) parent() parents() prop([key]) props() reduce(fn[, initialValue]) reduceRight(fn[, initialValue]) render() setContext(context) setProps(nextProps) setState(nextState) shallow([options]) simulate(event[, data]) some(selector) someWhere(predicate) state([key]) text() type() unmount() update()
  18. 18. Shallow Rendering at(index) childAt() children() closest(selector) contains(nodeOrNodes) context([key]) debug() equals(node) every(selector) everyWhere(predicate) filter(selector) filterWhere(predicate) find(selector) findWhere(predicate) first() forEach(fn) get(index) hasClass(className) html() instance() is(selector) last() map(fn) not(selector) parent() parents() prop([key]) props() reduce(fn[, initialValue]) reduceRight(fn[, initialValue]) render() setContext(context) setProps(nextProps) setState(nextState) shallow([options]) simulate(event[, data]) some(selector) someWhere(predicate) state([key]) text() type() unmount() update()
  19. 19. Shallow Rendering at(index) childAt() children() closest(selector) contains(nodeOrNodes) context([key]) debug() equals(node) every(selector) everyWhere(predicate) filter(selector) filterWhere(predicate) find(selector) findWhere(predicate) first() forEach(fn) get(index) hasClass(className) html() instance() is(selector) last() map(fn) not(selector) parent() parents() prop([key]) props() reduce(fn[, initialValue]) reduceRight(fn[, initialValue]) render() setContext(context) setProps(nextProps) setState(nextState) shallow([options]) simulate(event[, data]) some(selector) someWhere(predicate) state([key]) text() type() unmount() update()
  20. 20. Shallow Rendering at(index) childAt() children() closest(selector) contains(nodeOrNodes) context([key]) debug() equals(node) every(selector) everyWhere(predicate) filter(selector) filterWhere(predicate) find(selector) findWhere(predicate) first() forEach(fn) get(index) hasClass(className) html() instance() is(selector) last() map(fn) not(selector) parent() parents() prop([key]) props() reduce(fn[, initialValue]) reduceRight(fn[, initialValue]) render() setContext(context) setProps(nextProps) setState(nextState) shallow([options]) simulate(event[, data]) some(selector) someWhere(predicate) state([key]) text() type() unmount() update()
  21. 21. Shallow Rendering at(index) childAt() children() closest(selector) contains(nodeOrNodes) context([key]) debug() equals(node) every(selector) everyWhere(predicate) filter(selector) filterWhere(predicate) find(selector) findWhere(predicate) first() forEach(fn) get(index) hasClass(className) html() instance() is(selector) last() map(fn) not(selector) parent() parents() prop([key]) props() reduce(fn[, initialValue]) reduceRight(fn[, initialValue]) render() setContext(context) setProps(nextProps) setState(nextState) shallow([options]) simulate(event[, data]) some(selector) someWhere(predicate) state([key]) text() type() unmount() update()
  22. 22. Shallow Rendering at(index) childAt() children() closest(selector) contains(nodeOrNodes) context([key]) debug() equals(node) every(selector) everyWhere(predicate) filter(selector) filterWhere(predicate) find(selector) findWhere(predicate) first() forEach(fn) get(index) hasClass(className) html() instance() is(selector) last() map(fn) not(selector) parent() parents() prop([key]) props() reduce(fn[, initialValue]) reduceRight(fn[, initialValue]) render() setContext(context) setProps(nextProps) setState(nextState) shallow([options]) simulate(event[, data]) some(selector) someWhere(predicate) state([key]) text() type() unmount() update()
  23. 23. Shallow Rendering at(index) childAt() children() closest(selector) contains(nodeOrNodes) context([key]) debug() equals(node) every(selector) everyWhere(predicate) filter(selector) filterWhere(predicate) find(selector) findWhere(predicate) first() forEach(fn) get(index) hasClass(className) html() instance() is(selector) last() map(fn) not(selector) parent() parents() prop([key]) props() reduce(fn[, initialValue]) reduceRight(fn[, initialValue]) render() setContext(context) setProps(nextProps) setState(nextState) shallow([options]) simulate(event[, data]) some(selector) someWhere(predicate) state([key]) text() type() unmount() update()
  24. 24. at(index) contains(nodeOrNodes) childAt() children() closest(selector) context([key]) debug() detach() every(selector) everyWhere(predicate) filter(selector) filterWhere(predicate) find(selector) findWhere(predicate) first() forEach(fn) get(index) hasClass(className) html() instance() is(selector) last() Full DOM Rendering - mount() map(fn) mount() not(selector) parent() parents() prop([key]) props() reduce(fn[, initialValue]) reduceRight(fn[, initialValue()]) ref(refName) render() setContext(context) setProps(nextProps) setState(nextState) simulate(event[, data]) some(selector) someWhere(predicate) state([key]) text() type() unmount() update()
  25. 25. - What is unit testing, benefits - Automated javascript testing - Unit testing redux - Unit testing React components - Real world examples - Visual testing (Storybook) - Resources
  26. 26. Examples
  27. 27. Examples
  28. 28. Examples
  29. 29. Examples
  30. 30. - What is unit testing, benefits - Automated javascript testing - Unit testing redux - Unit testing React components - Real world examples - Visual testing (Storybook) - Resources
  31. 31. - What is unit testing, benefits - Automated javascript testing - Unit testing redux - Unit testing React components - Real world examples - Visual testing (Storybook) - Resources
  32. 32. Resources Testing React Applications - April 2016 London React User Group Test Driven React Tutorial - Spencer Dixon Redux README - Writing Tests Enzyme - Airbnb Storybook - KadiraHQ Slides: github.com/djkirby/react-symposium-unit-testing

×