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.
React JS application
testing
with: mocha, enzyme,
webdriver.iogoo.gl/9zC48K
Oleksandr Zinevych
Software engineer at Datamart inc.
6+ years of experience
Preferred technologies: Javascript,
.NET
goo....
Agenda
What is software testing
Why we don’t like to write tests
Why it might be very helpful for us
Example of successful...
Software testing is smth about ...
Do you like to cover your code with
tests?
But why?
It’s boring
We do not have enough time for writing tests
We do not have a budget for writing testing
QA should do that
We ...
Usually we start writing tests when:
It was a specific task
There is no interesting features to do :)
Project is almost do...
Development Unit Tests
Costs
TimeQA Testing Production
We should write tests because
It will increase stability of the app
Extending the app will be less risky
Architecture will...
Demo application architecture
Rest API Proxy API
ReactJS
part
goo.gl/9zC48K
Common ways of testing ReactJS Components
ReactTestUtils
Jest (Facebook)
Enzyme (Airbnb)
What is Enzyme?
Enzyme is a JavaScript Testing utility
for React that makes it easier to
assert, manipulate, and traverse ...
Shallow render Full DOM render Static render
Enzyme
Renders your
component as a
single unit, without
impacting of childs
W...
Render process
shallow(<YourComponent />)
mount(<YourComponent />)
render(<YourComponent />)
ReactWrapper:
.find(selector)...
Props mocking
The simplest test
Another one
Card component
Initial test
Header test
State processing
MountWithTheme
Enzyme known issues
SFC(Stateless Functional Component) with mount
Use Redux connect just in root component
Works only wit...
Part 2
Functional and Integration testing
Integration testing - combines unit tests, and checks the
this combination works as exp...
A little bit of history
Selenium 1.0
Webdriver
WebDriver is a remote control interface that enables
introspection and control of user agents. It provides a
pla...
Selenium 1.0 + Webdriver = Selenium 2.0
InternetExplorerDriver FirefoxDriver ChromeDriver SafariDriver
Webdriver.io - Selenium 2.0 binding for
node.js
How it works?
Remote or Local
Selenium
Server
Browser-specific
Webdriver
Why webdriver.io?
Synchronous implementation of asynchronous browser
commands
Simpler syntax
Better documentation
Flexibil...
Config file
Page object example
webdriver.io simple test example
Form testing example
Page Object helper functions
Conclusion
Frontend tests are really important and useful
The cost is not really big, profit is much bigger
It’s easy to w...
Thank you!
Demo project: https://github.com/zinevych/hot-complaints-universal
Email: aleksanderzinewicz@gmail.com
Facebook...
Questions?
Testing of React JS app
Testing of React JS app
Testing of React JS app
Testing of React JS app
Testing of React JS app
Upcoming SlideShare
Loading in …5
×

Testing of React JS app

1,283 views

Published on

React JS Components testing using mocha, enzyme, webdriver.io

Published in: Software
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/tRU2v ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Paid To Facebook? Earn up to $200/day on social media sites. ◆◆◆ http://t.cn/AieXipTS
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Positions Available Now! We currently have several openings for writing workers. ★★★ http://ishbv.com/easywriter/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Testing of React JS app

  1. 1. React JS application testing with: mocha, enzyme, webdriver.iogoo.gl/9zC48K
  2. 2. Oleksandr Zinevych Software engineer at Datamart inc. 6+ years of experience Preferred technologies: Javascript, .NET goo.gl/9zC48K
  3. 3. Agenda What is software testing Why we don’t like to write tests Why it might be very helpful for us Example of successful tests implementation goo.gl/9zC48K
  4. 4. Software testing is smth about ...
  5. 5. Do you like to cover your code with tests?
  6. 6. But why?
  7. 7. It’s boring We do not have enough time for writing tests We do not have a budget for writing testing QA should do that We don't use TDD, so that's why there are no unit tests … and much more! goo.gl/9zC48K
  8. 8. Usually we start writing tests when: It was a specific task There is no interesting features to do :) Project is almost done There was a huge fuck-up recently goo.gl/9zC48K
  9. 9. Development Unit Tests Costs TimeQA Testing Production
  10. 10. We should write tests because It will increase stability of the app Extending the app will be less risky Architecture will be better Code will be more understandable It will make your customers and users happier goo.gl/9zC48K
  11. 11. Demo application architecture Rest API Proxy API ReactJS part goo.gl/9zC48K
  12. 12. Common ways of testing ReactJS Components ReactTestUtils Jest (Facebook) Enzyme (Airbnb)
  13. 13. What is Enzyme? Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. goo.gl/9zC48K
  14. 14. Shallow render Full DOM render Static render Enzyme Renders your component as a single unit, without impacting of childs When you need to test interaction with DOM API, or component lifecycle Renders React Component to static HTML
  15. 15. Render process shallow(<YourComponent />) mount(<YourComponent />) render(<YourComponent />) ReactWrapper: .find(selector) .contains(selector) .children() .parents() etc...
  16. 16. Props mocking
  17. 17. The simplest test
  18. 18. Another one
  19. 19. Card component
  20. 20. Initial test
  21. 21. Header test
  22. 22. State processing
  23. 23. MountWithTheme
  24. 24. Enzyme known issues SFC(Stateless Functional Component) with mount Use Redux connect just in root component Works only with React
  25. 25. Part 2
  26. 26. Functional and Integration testing Integration testing - combines unit tests, and checks the this combination works as expected Functional (Acceptance) testing - tests which are written to see whether the application's functionality satisfies the specification
  27. 27. A little bit of history
  28. 28. Selenium 1.0
  29. 29. Webdriver WebDriver is a remote control interface that enables introspection and control of user agents. It provides a platform- and language-neutral wire protocol as a way for out- of-process programs to remotely instruct the behaviour of web browsers.
  30. 30. Selenium 1.0 + Webdriver = Selenium 2.0 InternetExplorerDriver FirefoxDriver ChromeDriver SafariDriver
  31. 31. Webdriver.io - Selenium 2.0 binding for node.js
  32. 32. How it works? Remote or Local Selenium Server Browser-specific Webdriver
  33. 33. Why webdriver.io? Synchronous implementation of asynchronous browser commands Simpler syntax Better documentation Flexibility and customization
  34. 34. Config file
  35. 35. Page object example
  36. 36. webdriver.io simple test example
  37. 37. Form testing example
  38. 38. Page Object helper functions
  39. 39. Conclusion Frontend tests are really important and useful The cost is not really big, profit is much bigger It’s easy to write them with modern approaches
  40. 40. Thank you! Demo project: https://github.com/zinevych/hot-complaints-universal Email: aleksanderzinewicz@gmail.com Facebook: https://www.facebook.com/aleks.zinevych
  41. 41. Questions?

×