ReactJS Training Day 6-10 | Abhisek Pattnaik | Impelsys

Reactjs Testing

Transcript

1. WELCOME TO REACTJS TRAINING DAY 6 ...by Abhisek Pattnaik Senior Software Engineer CE Services, Heart Bangalore
2. Copyright © 2023 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. 1. Testing Components 2. What to test? 3. How to test? 4. React Ecosystem (more libraries) 5. Resources 6. Exercise Agenda
3. Copyright © 2023 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ React Testing Library • Make components testable • Provide data-testid="" attribute • Export all components • Test file extension: ComponentFile.test .jsx or .tsx • Test Shallow or Depth of Component? Decide. • Shallow – use jest mock import • Cheatsheet: https://testing-library.com/docs/react-testing- library/cheatsheet • userEvent.click, userEvent.clear, userEvent.type, etc. from @testing-library/user-event • render(), {container}, screen{}, debug(), getByTestId(), renderHook(), getByLabelText() Testing Components
4. Copyright © 2023 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ React Testing Library • React Components • Rendering • Re-rendering • Hooks • Pages • Service Calls • Reducers • Utils • User Actions • Unit Tests What to Test
5. Copyright © 2023 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ React Testing Library • Jest (Runner + Mocking + Spy + Assertion) for Unit Tests • Cypress/Puppeteer/Webdriver/Playwright for E2E Tests with MSW • Test the Happy flow • Test the Edge cases • Negative • Far negative • Positive • Far positive • Zero • User interaction driven • Table based test cases (easy manageable) • Normal tests • Snapshot based • Value Assertion based How to Test
6. Testing JS and Components Demo Time
7. Copyright © 2023 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • Gatsby – Static Site Generator • Emotion – alternative to Styled Component • Spectacle – create Presentation • MDX-Deck – create Presentation in MDX • Remotion – make videos programmatically More React Ecosystem
8. Copyright © 2023 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • Testing Recipes: https://reactjs.org/docs/testing- recipes.html • Testing Library: https://testing- library.com/react • User Event Testing: https://testing- library.com/docs/user-event/intro • MSW: https://mswjs.io/ • Arrange Act Assert Pattern: http://wiki.c2.com/?ArrangeActAssert Resources
9. Copyright © 2023 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. Grab your Phone Scan the QR Code and Go to the Slido Link https://app.sli.do/event/jh6V4yMAXwtNoaezGEEbym or Join at slido.com #1191681
10. Copyright © 2023 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • Write a testable component • Write tests for the component • Add user interactivity to component • Test user interactivity Exercise
11. QUESTIONS? React out via abhisek.pattnaik@impelsys.com https://about.me/abhisekp