Frontend Testing with React, Jest, React Testing Library and Playwright

🙌 Proposal

• ⏰ 5 days of online course, 4 hours per day (morning or afternoon)
• 💼 1 Office work (8 hours of office work)
• 👨‍💻 Team
  • 6-10 people
  • Mid/senior
• 💶 Price
  • To define.
  • Discount by Fundae (only Spain) → https://www.fundae.es/

🤞 Requirements

• ⌨️ Node +14
• 🏃 Typescript
• 📜 git

🏋🏼 The work modality will be with https://www.codescouts.academy/blog/mob-programming/

💡Optional: Each class will be recorded and uploaded to the Codescouts Campus automatically at the end of each session (private workspace for you) So students can review the classes, or see them if they have not been able to attend → [https: //campus.codescouts.academy/] (https://campus.codescouts.academy/)

📋 Agenda

1️⃣ Day 1 - Logic or component test 🤔

• 🤝 Presentation → ⏲️10min
• 🤲 Enter the Explanation course agenda → ⏲️10min
• 📕 Theory → ⏲️30min
  • 🤔 What do we look for with the Testing Frontend?
  • 🦿 Types of tests, review of the testing pyramid.
  • 👀 Jest Methods
  • 😡 All our problems are in design
• 🏉 Exercise 1 - Disruptive test ⏲️90min
  • Our domain is right.
  • What else does if the component is visible or not
• 🥐 Break → ⏲️10min
• ⚽️ Exercise 2 - A good test ⏲️90min
  • Good practices for your component to be easy to test.
  • Tests and rigid design, to refactorize …
• 🤔 Reflection → ⏲️10min
  • Does it cost a lot of effort to test?
  • Design/architecture problems?
    • When the equipment has trouble testing their applications, 2 things can occur.
      • The team does not know how to do automated tests 🤦
      • Project architecture has serious problems 🏗️

2️⃣ Day 2 - Component tests, testing everything?👀

• 🤝 Doubts of yesterday → ⏲️5min
• 📕 Theory → ⏲️30min
  • How we define the scope of a test
  • Good practices in component tests
• 🏉 Exercise 1 - Behavior test ⏲️90min
  • When using mock, spy, stub
  • Recommendations when using React Testing Library
• 🥐 Break → ⏲️10min
• ⚽️ Exercise 2 - Visulization test ⏲️90min
  • Good practices when designing a testable border component
  • When to use and when not Snapshots
• 🤔 Reflection → ⏲️10min
  • You prefer to test behavior or visualization, is one consequence of the other?
  • Snapshots or toHaveBeenCalledTimes

3️⃣ Day 3 - Designing for Tests 👀

• 🤝 Doubts of yesterday → ⏲️5min
• 📕 Theory → ⏲️30min
  • 🎡 Relationship between the architecture of our project and the tests that we do
    • Rigidity of the design, stiffness of the tests
    • Design stiffness, more expensive tests
    • Injecting units, simplifying tests
• 🎯 Exercise 1 - Refactorizing components to test them → ⏲️90min
  • Component refactorization techniques to be able to test
  • Atomizing components
• 🥐 Break → ⏲️10min
• ⛳️ Exercise 2 - Tests contributing VS VS Lost time → ⏲️90min
  • Creating tests that provide value
  • Security network tests
  • Reliability
• 🤔 Reflection → ⏲️10min
  • What type of tests are those that provide value?
  • How can we do more reliable tests?

4️⃣ Day 4 - Testing to design 🏃

• 🤝 Doubts of yesterday → ⏲️5min
• 🧩 What is Development Test-Driven?→ ⏲️30min
  • It’s not test!It is design.
• 🎳 Exercise 1 - How to think about your components with TDD → ⏲️90min
  • Reviewing the bases
  • Recommendations
  • Mnemonic tricks
• 🥐 Break → ⏲️10min
• 🎾 Exercise 2 - TDD applied to our domain → ⏲️90min
• 🤔 Reflection - Advantages and Disadvantages of TDD in Frond → ⏲️10min
  • Why don’t I recommend TDD for components.
    • They do not contribute so much value vs. the effort it implies.

5️⃣ Day 5 - E2E & Clean Architecture

• 🤝 Doubts of yesterday → ⏲️5min-E2e Tests
  • 🐞 What are we looking for with an E2E test? → ⏲️30min
    • Review of E2E frameworks, pros and cons.
    • Gherkin in E2E
    • Could our product owner create them?
  • 🖥️ Exercise 1 - Testing as a user.→ ⏲️60min
    • E2E test with playwright.
• 🥐 Break → ⏲️10min
  • 🤔 Why Clean Architecture and what is the relationship with the tests? → ⏲️25min
  • 🖌️ Exercise 2 - Testing components with Clean Architecture → ⏲️90min
    • TDD with Clean Architecture
    • Testing domain behaviors
    • Delimiting the scope of the test to the domain services.
    • Injecting units easily
• 🙌 Feedback → ⏲️10min

💪 Consulting Day (8 hours of work together)

This day is to work hand in hand with the team, the main objective is to land the concepts and practices learned in the course in the current project, also review the following points next to the team.

• 🤔 Current Architecture Consulting
• 😭 Pain Points review
• 🤜 Recommendations
• 🕸️ Refactorization
• 🦾 Improvement margin
• 🧩 Review of potential modules a prioritize the test
• 🕵️ Code base and improvement suggestions
• 💣 Rigid design, separation of clear responsibilities?

🥋 Coach

Damián Pumar

Technical coach / Software craftsman / Speaker

🌐 https://damianpumar.com/

🐦 https://twitter.com/damianpumar

🎤Latest speaker conference 👉 https://www.damianpumar.com/events/

Something wrong? Let me know 🙏