testing of react js app
TRANSCRIPT
React JS application testing
with: mocha, enzyme, webdriver.iogoo.gl/9zC48K
Oleksandr ZinevychSoftware engineer at Datamart inc.
6+ years of experience
Preferred technologies: Javascript, .NET
goo.gl/9zC48K
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
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 don't use TDD, so that's why there are no unit tests
… and much more!goo.gl/9zC48K
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
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 be better
Code will be more understandable
It will make your customers and users happier
goo.gl/9zC48K
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 your React Components' output.
goo.gl/9zC48K
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
Render process
shallow(<YourComponent />)
mount(<YourComponent />)
render(<YourComponent />)
ReactWrapper:
.find(selector)
.contains(selector)
.children()
.parents()
etc...
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 with React
Part 2
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
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 platform- and language-neutral wire protocol as a way for out-of-process programs to remotely instruct the behaviour of web browsers.
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-specificWebdriver
Why webdriver.io?
Synchronous implementation of asynchronous browser
commandsSimpler syntax
Better documentation
Flexibility and customization
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 write them with modern approaches
Thank you!
Demo project: https://github.com/zinevych/hot-complaints-universal
Email: [email protected]
Facebook: https://www.facebook.com/aleks.zinevych
Questions?