Download as PDF, PPTX
Uploaded byJuriy Zaytsev
Intro to front-end testing
This document discusses front-end testing for a React/Redux application called SpaceStation. It outlines the current testing stack including Jest, Enzyme and React test utils. It describes different types of tests like structural, behavioural and snapshot testing. It also covers challenges of testing Redux and connected components as well as options for visual regression and acceptance testing.
More Related Content
![[FullStack NYC 2019] Effective Unit Tests for JavaScript](https://cdn.slidesharecdn.com/ss_thumbnails/effectiveunittestsforjavascript-190607225853-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Intro to front-end testing
Intro to front-end testing
- 1.
- 2.
- 4. Majority of tests inSpaceStation * React components * Basic structural correctness * Simple behaviour correctness * Non-visual style correctness
- 6.
- 7.
- 8. Assertions library Test runner Reacttest utils
- 9. Assertions library Test runner Reacttest utils Mocking utils
- 10. Assertions library Test runner Reacttest utils Mocking utils
- 11. Assertions library Test runner Reacttest utils Mocking utils
- 12. Assertions library Test runner Reacttest utils Mocking utils
- 13. Assertions library Test runner Reacttest utils Mocking utils
- 14.
- 15. Structural testing minMaxInput-test.jsx Enzyme renderer Sourcefile Fake props Render component
- 16. Structural testing minMaxInput-test.jsx Test case(jasmine) Expectation (jasmine) Test content (enzyme)
- 17. Behavioural testing minMaxInput.jsx Validates value Ensuresmin < max Calls onChange prop
- 18. Behavioural testing minMaxInput-test.jsx Find input Simulatechange event with a specific value Check onChange prop was called Check correct values were set
- 19.
- 20. Jest snapshots Check textcontains user initials Before
- 21. Jest snapshots Check textcontains user initials Before After
- 22.
- 23.
- 24.
- 25. Choose your poison Rendersin virtual DOM Renders in a real browser Faster (~30sec) Slower (~100sec) No virtual display req. Needs virtual display Snapshot support No snapshot support
- 26.
- 27. Testing Redux Abstraction. Connects propsto store via selectors Abstraction. Connects props to actions (potentially thunks) Abstraction. Checks auth in store, uses router Problem
- 28. Testing Redux Our abstractionfor testing connected components Middleware Fake props w. spies Actual mounting of component w. middleware, props, and store Solution
- 29. Testing Redux Mount componentw. specific "store" values Ensure deeply nested component is rendered Check prop value Mini redux store Solution
- 30. Testing Redux Passes inmocked store A sprinkle of Formsy Creates wrappers for enzyme methods and injects the above concoction Some localisation "magic" A bit more router "magic", for good measure Solution
- 31.
- 32.
- 33. Acceptance tests * Actualbrowser launched * Can test entire workflows * Naturally slow * Flakey tests; data inconsistency * Currently non-maintained * Very important to have
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. Later instalments * Testingconnected components vs. reducers & actions independently * Working w. spies, mocks, stubs (Sinon, Jest) * Working w. Faker for generating random data * Making snapshots of connected components TBD * Faking timers and promises w. Sinon & Jest
- 41. Further reading Testing inSpacestation https://github.com/WeConnect/spacestation-v2/blob/master/TESTING.md Getting started with Jest https://facebook.github.io/jest/docs/en/getting-started.html Puppeteer https://github.com/GoogleChrome/puppeteer Cypress https://github.com/cypress-io/cypress Unit testing redux connected components https://hackernoon.com/unit-testing-redux-connected-components-692fa3c4441c Sinon (mocks, stubs, spies) https://github.com/sinonjs/sinon Enzyme http://airbnb.io/enzyme/