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

1. React JS application
testing
with: mocha, enzyme,
webdriver.iogoo.gl/9zC48K

2. Oleksandr Zinevych
Software engineer at Datamart inc.
6+ years of experience
Preferred technologies: Javascript,
.NET
goo.gl/9zC48K

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. Software testing is smth about ...

5. Do you like to cover your code with
tests?

7. But why?

8. 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

9. 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

10. Development Unit Tests
Costs
TimeQA Testing Production

11. 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

12. Demo application architecture
Rest API Proxy API
ReactJS
part
goo.gl/9zC48K

14. Common ways of testing ReactJS Components
ReactTestUtils
Jest (Facebook)
Enzyme (Airbnb)

15. 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

16. 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

17. Render process
shallow(<YourComponent />)
mount(<YourComponent />)
render(<YourComponent />)
ReactWrapper:
.find(selector)
.contains(selector)
.children()
.parents()
etc...

20. Props mocking

21. The simplest test

22. Another one

23. Card component

24. Initial test

25. Header test

26. State processing

27. MountWithTheme

28. Enzyme known issues
SFC(Stateless Functional Component) with mount
Use Redux connect just in root component
Works only with React

29. Part 2

30. 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

31. A little bit of history

32. Selenium 1.0

33. 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.

34. Selenium 1.0 + Webdriver = Selenium 2.0
InternetExplorerDriver FirefoxDriver ChromeDriver SafariDriver

35. Webdriver.io - Selenium 2.0 binding for
node.js

36. How it works?
Remote or Local
Selenium
Server
Browser-specific
Webdriver

37. Why webdriver.io?
Synchronous implementation of asynchronous browser
commands
Simpler syntax
Better documentation
Flexibility and customization

39. Config file

40. Page object example

41. webdriver.io simple test example

42. Form testing example

43. Page Object helper functions

44. 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

45. Thank you!
Demo project: https://github.com/zinevych/hot-complaints-universal
Email: aleksanderzinewicz@gmail.com
Facebook: https://www.facebook.com/aleks.zinevych

46. Questions?