Testing of React JS app
-
Upload
aleks-zinevych -
Category
Software
-
view
29 -
download
3
Transcript of Testing of React JS app
![Page 1: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/1.jpg)
React JS application testing
with: mocha, enzyme, webdriver.iogoo.gl/9zC48K
![Page 2: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/2.jpg)
Oleksandr ZinevychSoftware engineer at Datamart inc.
6+ years of experience
Preferred technologies: Javascript, .NET
goo.gl/9zC48K
![Page 3: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/3.jpg)
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
![Page 4: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/4.jpg)
Software testing is smth about ...
![Page 5: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/5.jpg)
Do you like to cover your code with tests?
![Page 6: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/6.jpg)
![Page 7: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/7.jpg)
But why?
![Page 8: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/8.jpg)
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
![Page 9: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/9.jpg)
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
![Page 10: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/10.jpg)
Development Unit Tests
Costs
TimeQA Testing Production
![Page 11: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/11.jpg)
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
![Page 12: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/12.jpg)
Demo application architecture
Rest API Proxy API ReactJS part
goo.gl/9zC48K
![Page 13: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/13.jpg)
![Page 14: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/14.jpg)
Common ways of testing ReactJS Components
ReactTestUtils
Jest (Facebook)
Enzyme (Airbnb)
![Page 15: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/15.jpg)
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
![Page 16: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/16.jpg)
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
![Page 17: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/17.jpg)
Render process
shallow(<YourComponent />)
mount(<YourComponent />)
render(<YourComponent />)
ReactWrapper:
.find(selector)
.contains(selector)
.children()
.parents()
etc...
![Page 18: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/18.jpg)
![Page 19: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/19.jpg)
![Page 20: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/20.jpg)
Props mocking
![Page 21: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/21.jpg)
The simplest test
![Page 22: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/22.jpg)
Another one
![Page 23: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/23.jpg)
Card component
![Page 24: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/24.jpg)
Initial test
![Page 25: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/25.jpg)
Header test
![Page 26: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/26.jpg)
State processing
![Page 27: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/27.jpg)
MountWithTheme
![Page 28: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/28.jpg)
Enzyme known issues
SFC(Stateless Functional Component) with mount
Use Redux connect just in root component
Works only with React
![Page 29: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/29.jpg)
Part 2
![Page 30: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/30.jpg)
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
![Page 31: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/31.jpg)
A little bit of history
![Page 32: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/32.jpg)
Selenium 1.0
![Page 33: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/33.jpg)
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.
![Page 34: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/34.jpg)
Selenium 1.0 + Webdriver = Selenium 2.0
InternetExplorerDriver FirefoxDriver ChromeDriver SafariDriver
![Page 35: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/35.jpg)
Webdriver.io - Selenium 2.0 binding for node.js
![Page 36: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/36.jpg)
How it works?
Remote or Local Selenium
Server
Browser-specificWebdriver
![Page 37: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/37.jpg)
Why webdriver.io?
Synchronous implementation of asynchronous browser
commandsSimpler syntax
Better documentation
Flexibility and customization
![Page 38: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/38.jpg)
![Page 39: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/39.jpg)
Config file
![Page 40: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/40.jpg)
Page object example
![Page 41: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/41.jpg)
webdriver.io simple test example
![Page 42: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/42.jpg)
Form testing example
![Page 43: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/43.jpg)
Page Object helper functions
![Page 44: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/44.jpg)
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
![Page 45: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/45.jpg)
Thank you!
Demo project: https://github.com/zinevych/hot-complaints-universal
Email: [email protected]
Facebook: https://www.facebook.com/aleks.zinevych
![Page 46: Testing of React JS app](https://reader036.fdocuments.in/reader036/viewer/2022081512/587db7aa1a28abae2f8b781d/html5/thumbnails/46.jpg)
Questions?