Vladyslav Romanchenko "How to keep high code quality without e2e tests"
0 likes72 views
This document discusses how to test React and Redux applications without end-to-end tests. It recommends using unit and integration tests instead to test individual components and functions. It provides examples of how to test helper functions, action creators, reducers, selectors, and component rendering and interactions using Jest and libraries like Enzyme. Key steps include mocking dependencies, dispatching actions, and asserting on output or UI states. Following these techniques allows testing isolated pieces and catching errors early without relying on unstable end-to-end tests.
Vladyslav Romanchenko "How to keep high code quality without e2e tests"
- 1. HOW TO KEEP HIGH CODE QUALITY WITHOUT E2E TESTS
- 2. „Vladyslav Romanchenko, „Senior QA Automation/UI Developer @Luxoft „5+ years experience in Test Automation and Development WHO AM I?
- 3. WHAT DO WE TEST?
- 4. REQUIREMENTS „Fast, reliable UI tests „Test should be used during development „Tests should run and pass even if BE is down „Tests should not require much maintenance
- 5. THE PROBLEMS WE HAD WITH E2E „No Predictable Data „Human review of Events „UI tests are unstable „Some daemons are running once in 2 minutes
- 6. SOLUTION „Use Unit and Integration tests
- 7. THE RESULTS WE GOT „Tests are finished in 73 seconds „Tests are finding errors „Tests help develop faster
- 8. MAIN FUNCTIONS OF UI 1. Send correct requests to BE 2. Calculate or prepare data using helper functions or Redux 3. Correctly render information from BE 4. Respond to user interaction through Event Listeners
- 9. TECHNOLOGIES USED „React „Redux „Enzyme/React testing library „Jest
- 10. TECHNOLOGY BASICS What is React?
- 11. TECHNOLOGY BASICS React allows to create small reusable components that contain all the needed HTML, CSS and JavaScript code (JSX)
- 13. TECHNOLOGY BASICS Redux – Predictable state container for JavaScript apps
- 14. TECHNOLOGY BASICS Important to know about Redux: „Manages global state for all the application „Uses pure functions „State is always immutable „New state is created using Actions
- 16. TECHNOLOGY BASICS Action is a simple JS object that has type field:
- 17. TECHNOLOGY BASICS Reducer is a function that takes state and action and returns new state:
- 18. TECHNOLOGY BASICS Selector is a function that takes state and returns only parts that are needed. Use ’reselect’ to memoize selectors:
- 19. WHAT TO TEST „Helper Functions „Action Creators „Reducer „Selectors „Components rendering „Component event handlers „Component helper functions (class methods)
- 20. HOW TO TEST HELPER FUNCTIONS
- 21. ASIDE There are 3 types of functions: ØPure functions ØImpure functions ØClosures
- 22. ASIDE Pure functions always return the same result for the same arguments.
- 23. ASIDE Result of Impure functions depends on some other variable, state or function changes arguments that are passed to it
- 24. ASIDE Closures return function as a result
- 27. ASIDE Impure function that uses state
- 28. ASIDE Closure
- 30. HOW TO TEST
- 31. HOW TO TEST Pure function
- 32. HOW TO TEST Mock everything to test Impure functions
- 33. HOW TO TEST Call functions immediately to test closures
- 34. HOW TO TEST ACTION CREATORS/THUNKS
- 35. ASIDE Thunk allows to dispatch functions instead of an actions. It is used to send requests to BE and create side effects.
- 37. HOW TO TEST Simple Action Creator testing steps: „Mock Store „Dispatch Action „Check what Actions were emitted
- 38. HOW TO TEST Mock Store
- 39. HOW TO TEST Run test
- 40. HOW TO TEST Async Action Creators testing steps: „Mock Store „Mock Fetch/Async action „Dispatch Action „Check what Actions were emitted „Check how fetch was called
- 41. HOW TO TEST Use async to make your tests asynchronous in order to test requests that are being sent
- 42. HOW TO TEST Use await to check the result
- 43. HOW TO TEST Mock fetch to check requests You can do it in config
- 44. HOW TO TEST If you are using TypeScript you would need to use FetchMock interface
- 45. HOW TO TEST Now you are ready to mock API responses
- 46. HOW TO TEST Don’t forget to run some negative tests
- 47. HOW TO TEST Time to check the results
- 48. HOW TO TEST Don’t forget await, when checking
- 49. HOW TO TEST What to do if there is an error thrown?
- 50. HOW TO TEST Use try/catch when you expect error
- 51. HOW TO TEST Modify state to check functions that use data from state
- 52. HOW TO TEST Use spys to mock functions
- 54. HOW TO TEST Steps to test Reducer „Mock all the needed parts of state „Prepare resulting state for each action „Call reducer with mocked state „Check the result
- 55. HOW TO TEST Here is an example
- 56. HOW TO TEST Change state directly in expect for simple cases
- 58. HOW TO TEST Steps to test selectors „Mock State or use resultFunc „Check the output from selector
- 59. HOW TO TEST Pass prepared state to selector
- 60. HOW TO TEST Prepare expectedResult
- 61. HOW TO TEST Call selector with prepared state
- 62. HOW TO TEST Use resultFunc if selector takes other selectors as inputs
- 63. HOW TO TEST Use resultFunc if selector takes other selectors as inputs
- 64. HOW TO TEST COMPONENTS RENDERING
- 65. HOW TO TEST Steps to test Component „Use render to render component „Use getByTestId or getByText to locate elements „ Use fireEvent to interact with elements
- 67. HOW TO TEST Fire event to check interaction
- 68. HOW TO TEST Mock functions to check its parameters
- 69. WHAT TO DO NEXT Next steps „Refactor class methods to separate files „Implement Visual regression in different browsers
- 70. BONUS
- 71. BONUS Use debugger and copy(variableName) to prepare data for tests
- 73. BONUS Once you reach debugger, an app is going to pause
- 74. BONUS Open console and run `copy` command with variable name as parameter
- 75. Q & A