Downloaded 72 times
Uploaded byAleks Zinevych
Testing of React JS app
This document discusses testing React JS applications with tools like Mocha, Enzyme, and Webdriver.io. It covers why writing tests is important, provides examples of unit testing React components with Enzyme, and discusses how to do functional and integration testing with Webdriver.io. The document demonstrates testing architectures, common testing patterns like page objects, and concludes that frontend tests are important and not too costly to implement.
More Related Content
Similar to Testing of React JS app
Testing of React JS app
- 1. React JS application testing with:mocha, enzyme, webdriver.iogoo.gl/9zC48K
- 2. Oleksandr Zinevych Software engineerat Datamart inc. 6+ years of experience Preferred technologies: Javascript, .NET goo.gl/9zC48K
- 3. Agenda What is softwaretesting 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 issmth about ...
- 5. Do you liketo cover your code with tests?
- 7.
- 8. It’s boring We donot 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 startwriting 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 TimeQATesting Production
- 11. We should writetests 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 RestAPI Proxy API ReactJS part goo.gl/9zC48K
- 14. Common ways oftesting ReactJS Components ReactTestUtils Jest (Facebook) Enzyme (Airbnb)
- 15. What is Enzyme? Enzymeis 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 FullDOM 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.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. Enzyme known issues SFC(StatelessFunctional Component) with mount Use Redux connect just in root component Works only with React
- 29.
- 30. Functional and Integrationtesting 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 bitof history
- 32.
- 33. Webdriver WebDriver is aremote 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 - Selenium2.0 binding for node.js
- 36. How it works? Remoteor Local Selenium Server Browser-specific Webdriver
- 37. Why webdriver.io? Synchronous implementationof asynchronous browser commands Simpler syntax Better documentation Flexibility and customization
- 39.
- 40.
- 41. webdriver.io simple testexample
- 42.
- 43. Page Object helperfunctions
- 44. Conclusion Frontend tests arereally 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: [email protected] Facebook: https://www.facebook.com/aleks.zinevych
- 46.