Course Code: react_dev_testing
Duration: 28 hours
Prerequisites:
  • Participants are expected to have a basic understanding of JavaScript
  • Experience with web development is preffered.

Audience

  • Web Developers
Overview:

Jest and Enzyme is testing framework.

This instructor-led, live training (online or onsite) is aimed at web developers who wish to use Jest and Enzyme to react apps.

Format of the Course

  • Interactive lecture and discussion.
  • Lots of exercises and practice.
  • Hands-on implementation in a live-lab environment.

Course Customization Options

  • To request a customized training for this course, please contact us to arrange.
Course Outline:

What is react?

● Installation
● Getting Started
● Add React to a Website
● Create a New React App

React

● Hello World
● Introducing JSX
● Rendering Elements
● Components and Props
● State and Lifecycle
● Handling Events
● Conditional Rendering
● Lists and Keys
● Forms
● Lifting State Up
● Composition vs Inheritance
● Accessibility
● Code-Splitting
● Context
● Error Boundaries
● Forwarding Refs
● Fragments
● Higher-Order Components
● Integrating with Other Libraries
● JSX In Depth
● Optimizing Performance
● Portals
● Profiler
● React Without ES6
● React Without JSX
● Reconciliation
● Refs and the DOM
● Render Props
● Static Type Checking
● Strict Mode
● Typechecking With PropTypes
● Uncontrolled Components
● Web Components

Hooks

● Introducing Hooks
● Hooks at a Glance
● Using the State Hook
● Using the Effect Hook
● Rules of Hooks
● Building Your Own Hooks
● Hooks API Reference

Introduction Typescript

● Modules
● Types
● Interfaces
● Functions
● Classes
● Implementing Interfaces
● Describing Constructors Using Interfaces
● Generics
● Union Type
● Intersection Type
● Type Alias
● Using External Packages and Their Types
● Declaration Merging
● Utility Types

How TypeScripts extends JavaScript to add more safety and tooling

● Primitives
● Any
● Literals
● Union and Intersection Types
● Unknown and Never
● Type Primitives
● Tuples
● Build-in Utility Types
● Nullable Types
● Meta-Types
● Conditional Types
● Discriminate Types
● Indexed Types
● Mapped Types
● Language
● Soundness
● Structural Typing
● Type Guards
● Type Widening and Narrowing
● Language Extensions
● Enums
● Nominal Typing
● Types vs Interfaces

React with Typescript

● Introduction
● Function Components
● Class Components
● Higher Order Components - React Redux
● Higher Order Components - Creating HOCs
● Render Props
● Event Handling
● Introduction to Hooks
● Hooks: useState
● Hooks: useEffect

Building a demo application using Typescript and React

● Use everything we have learned to make the application
● Best practices while using React with Typescript
● Debugging Basics

CONCURRENT MODE

● Introducing Concurrent Mode
● Suspense for Data Fetching
● Concurrent UI Patterns
● Adopting Concurrent Mode
● Concurrent Mode API Reference

Jest

● Setting up Jest without create-react-app
● Enzyme Introduction and Setup?
● Using Enzyme in a Test
● Types of Tests
● Testing Asynchronous Code
● Setup and Teardown
● Mock Functions
● Jest Platform and Community

Jest Guides

● Snapshot Testing
● Async Example
● Timer Mocks
● Es6 Class Mocks
● Bypassing Module mocks
● Using with webpack
● using with puppeteer
● using with MongoDB and DynamoDB
● DOM Manipulation
● Watch Plugins
● Migration to Jest and ARchitecture

Framework Guides

● Testing React Apps few demos and few custom made apps
● Testing React Native Apps and Web Framework
● In Depth Look in Globals, Expect, Mock Functions, Jest Object and Configuring Jest
● Jest CLI Options

Sample Example and Exercise with custom web application.

Note

We will use some custom web applications as well as some already existing application for React Development and testing. All the above section will be followed by some Example and Assessments for the Participants