The document discusses component level testing of a React application using Enzyme. It provides an overview of the company and project being tested, the test approach focusing on earlier testing to prevent bugs, and how testing is done in React. It then details Enzyme and how it can be used to render components, find elements, simulate user actions, and make assertions with Jest. Examples of unit, integration and snapshot tests are also provided. The summary discusses the pros and cons of this testing approach.
4. GrandParade
● Founded in 2007
● UK: London, PL: Kraków
● Products: apps,websites and commerce
platforms forthe sports,gaming and media
companies
● Acquisitionby WH in 2016
● Number of employees:~ 300
About company - GP
GrandParadePoland
www.grandparade.co.uk
5. About company - WH
GrandParadePoland
www.grandparade.co.uk
WilliamHill
● Founded in 1934
● Leading betting company
○ Retail
○ Online
■ Sports
■ Gaming
● UK, Gibraltar, Poland, Bulgaria, Italy,
Spain, USA, Australia and the
Philippines
● Number of employees:~16k
6. About project
• Registration application
• About 20 WH sites on desktop
• Banners, landing pages,promotions
• Bonus actions
• Analytics
• Challenges
• Technologicalconsistency
• Customization by CMS
• Multi-step
• Field order
• Componentversions
• Tests inCucumber/Selenium/Java
GrandParadePoland
www.grandparade.co.uk
8. Agile@Scale transformation
What are we doing
• Scrum as default managementframework
• Reducing silos and building cross functionalteams
• Productcentred teams
• Putting trust (and responsibility) into teams
• High level of test automation – coverage 80-90% (code and functional)
• CI/CD processimprovements
GrandParadePoland
www.grandparade.co.uk
9. Test approach - Detecting bugs
Traditionalapproach
• QA silos – weak collaboration
• Late testing – usually after deployon test
environment
• Often lack of time to create automated tests
Results
• Low test code quality (lack of patterns)
• Slow and flaky E2E tests
• Low trust to automated tests results
• More and more manual work
GrandParadePoland
www.grandparade.co.uk
11. Preventing bugs
Currentapproach
• Environment equippedwith tools for early testing
• QAs work close with developers,shared quality responsibility
• QA tests in dev project,obligatory codereview
• Automated test pipeline on push and merge
Results
• Early bug/inconsistencyidentification
• Better test code quality
• Very fast and stable componenttests
• High functional requirements coverage by automation
• Huge reductionof E2E test
GrandParadePoland
www.grandparade.co.uk
High cost
Low speed
Low cost
High speed
Exploratory
testing
12. Tools
● JavaScript ES6 + Babel
● Npm, yarn – package managers
● React.js – front-end framework
● Enzyme – testing tool for React.js
● JSDOM – headless browser
● Jest – test runner, assertion library, spy tool, optimized for React.js
● Mocha/Chai/Sinon – tools replaced by Jest
● Gitlab – code management tool, CI pipelines
● Allure – test report generator
GrandParadePoland
www.grandparade.co.uk
13. Project structure
● Tests in component directory
● Unit, component, integration tests
in the same directory
● Test mocks, helpers, user data
generators, DDT data in separate
common directory
● E2E tests in separate project
GrandParadePoland
www.grandparade.co.uk
15. How React works
• Components – Componentis an object that encapsulates part of the app. Reusable and easy to test.
• Reactivity – Elements are rendered after every change
• Virtual DOM(DocumentObject Model) – Abstractequivalent of DOM, used to detect (by comparision) which
elements have changed and need to be re-rendered
• JSX – Allows to pass JS objects into HTML, e.g.
<div>
<ObjectJS />
</ div>
GrandParadePoland
www.grandparade.co.uk
16. Enzyme – what it is?
Enzyme is a JavaScript Testing utility forReact that makes it easier to render, assert and manipulate your
React Components' output.
Enzyme – Airbnb projectwith more than 200 contributors
Decentdocumentationbut very general, with very basic examples
http://airbnb.io/enzyme/
GrandParadePoland
www.grandparade.co.uk
17. Enzyme – DOM testing
Shallow
• Don't render children
• Isolated - test cannot affecteach other
• Faster than Mount
Render
• Renders Static HTML structure
• With children
Mount
• Renders full DOM
• Includes the logic of components
• Testcan affecteach other
GrandParadePoland
www.grandparade.co.uk
18. .find()
<input type="text" id="reg-firstName" class="sb-input sb-input--error"
placeholder="" name="firstName" value="">
Supported CSS Selectors
ID element = wrapper.find('#reg-firstName');
Class Name element = wrapper.find('.sb-input');
Atribute element = wrapper.find('[name="firstName"]');
Elementtype element = wrapper.find('input[name="firstName"]');
Contextual element = wrapper.find('input.sb-input');
element = wrapper.find(('#reg-firstName > .sb-input-error');
GrandParadePoland
www.grandparade.co.uk
19. .find()
Not Supported Selectors
Pseudo Class element = wrapper.find('input:not([disabled])');
Enzyme received a pseudo-class CSS selector ('input:not([disabled])') that it does not currently support
Xpath element = wrapper.find('//*[@id="reg-firstName"]');
Supported getters
elements.first()
elements.last()
elements.at(n) – n-th element
Usage example:
element2 = wrapper.find('.sb-input').at(1)
GrandParadePoland
www.grandparade.co.uk
27. Data Driven Testing
Recommended tools for Jest
○ jest-in-case
○ Sazerac
Jest-in-case
○ Cases function
○ Data Object
○ Results
○ More than DDT
GrandParadePoland
www.grandparade.co.uk
28. Snapshot tests – how it works
it('renders correctly', () => {
const tree = renderer.create(<Link page="http://www.facebook.com">Facebook</Link>)
.toJSON();
expect(tree).toMatchSnapshot();
});});
exports[`renders correctly 1`] = `
<a className="normal"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]} > Facebook </a>
`;
GrandParadePoland
www.grandparade.co.uk
Test
Snapshot
29. Snapshot tests
● Easy testing in some cases, typical examples:
○ renders of React.js components
○ other serializable data
● Generated when component is ready (not for TDD)
● Code coverage works with snapshots
● Updated on demand
● Need mocks if data in component changing
● Significantly slower than typical unit and component tests
● Stored in code repository (may increase repo size)
GrandParadePoland
www.grandparade.co.uk
32. Tests in CI
Gitlab Pipelines
● Automated start (push, merge)
● Easy parallelization
● Bock git actions when tests fail
● Configurable
● Job as code approach
GrandParadePoland
www.grandparade.co.uk
33. Tests in CI – Jenkins - integration with E2E
Jenkins
● Jobs / Multijob
● Allure plugin
GrandParadePoland
www.grandparade.co.uk
34. Timescale
Remarks
• execution time from Jenkins jobs, tests run parallel as Jenkins jobs
• Old – Java, cucumber, selenium
• New – JS, unit, component, integration - enzyme, E2E – webdriver.io
GrandParadePoland
www.grandparade.co.uk
Old - E2E New - component
Unit 1 min. 2 min.
Component - 2 min.
Integration 2 min. 1 min.
E2E > 55 min. approx. 10-15 min
Total > 55 min. approx. 10-15 min
35. How about test pyramid?
GrandParadePoland
www.grandparade.co.uk
37. GrandParadePoland
www.grandparade.co.uk
Pros & Cons of our approach
Advantages
• Tests are less time consuming
• Stability of tests are much better
• Automated testing can be started earlier in
software developmentlife cycle
• QAs better understand how software works
internally – more opportunities to create good
test cases
Disadvantages
• Requires good cooperationand help from
developmentteam
• QAs have to adapt to developers’workflow and
projectrules
• Some tools have poordocumentation
• Some features in test tools are not mature yet