Intro to front-end testing
0 likes425 views
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.
Intro to front-end testing
- 4. Majority of tests in SpaceStation * React components * Basic structural correctness * Simple behaviour correctness * Non-visual style correctness
- 8. Assertions library Test runner React test utils
- 9. Assertions library Test runner React test utils Mocking utils
- 10. Assertions library Test runner React test utils Mocking utils
- 11. Assertions library Test runner React test utils Mocking utils
- 12. Assertions library Test runner React test utils Mocking utils
- 13. Assertions library Test runner React test utils Mocking utils
- 15. Structural testing minMaxInput-test.jsx Enzyme renderer Source file 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 Ensures min < max Calls onChange prop
- 18. Behavioural testing minMaxInput-test.jsx Find input Simulate change event with a specific value Check onChange prop was called Check correct values were set
- 20. Jest snapshots Check text contains user initials Before
- 21. Jest snapshots Check text contains user initials Before After
- 25. Choose your poison Renders in virtual DOM Renders in a real browser Faster (~30sec) Slower (~100sec) No virtual display req. Needs virtual display Snapshot support No snapshot support
- 26. Testing Redux
- 27. Testing Redux Abstraction. Connects props to store via selectors Abstraction. Connects props to actions (potentially thunks) Abstraction. Checks auth in store, uses router Problem
- 28. Testing Redux Our abstraction for testing connected components Middleware Fake props w. spies Actual mounting of component w. middleware, props, and store Solution
- 29. Testing Redux Mount component w. specific "store" values Ensure deeply nested component is rendered Check prop value Mini redux store Solution
- 30. Testing Redux Passes in mocked 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
- 32. Acceptance tests
- 33. Acceptance tests * Actual browser launched * Can test entire workflows * Naturally slow * Flakey tests; data inconsistency * Currently non-maintained * Very important to have
- 34. Acceptance tests
- 35. Acceptance tests
- 36. Acceptance tests
- 40. Later instalments * Testing connected 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 in Spacestation 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/