Master Jest Unit And Integration Testing With React

Learn to write Unit and Integration Test for your React JS application with Jest Testing Library

What you'll learn

What is Jest testing library and how to use it to write Unit and Integration test for any React Js application.

How Software development and testing takes place in a real live project in any company

What are Behavior driven development (BDD) and Test driven development(TDD) and the difference between the two techniques.

We will also learn to create react app and functional components. Then write tests for these components.

We will also see how to Mock real API calls for our integrating test.

We will learn to create Backend Node Express API

We will learn to make API calls from React app to our backend

How to debug your test

Requirements

Basics of Javascript

Description

In this course you will learn about jest testing library and how to use it to write Unit and Integration test for any react Js application.We will start by learning how does software development and testing takes place in a real live project in any company.Then we will learn about the importance of automation tests and importance of writing unit and integration tests.We will then learn about Behavior driven development (BDD) and Test driven development(TDD) and the difference between the two techniques.We will also learn to create react app and functional components. Then write tests for these components.We will also see how to Mock real API calls for our integrating test.All these and much more we will learn in handson based approach in a step by step manner.Following is the sequence we will cover the various topics:0-Introduction video - Course Overview1-Why we need Testing and SDLC2-BDD vs TDD Testing Approach3-Types of Testing - UT, IT, E2E4-Creating React App and Adding Testing Capability5-Creating Some DOM elements for Basic Testing6-Writting and Running our First Test7-How to get the Role of an Element8-Understanding difference between getBy queryBy and findBy9-Code Hands-on for getBy queryBy10-Requirements for Unit Test Cases11-Setup project structure and install react extention12-Test case for Feedback Form Onload Scenario13-Grouping similar Tests in one Describe block14-Adding user interaction to our Test with the help of fireEvent15-Understanding React Project Flow and Structure16-State variable and useState hook17-React Functional component and JSX18-Developing the Feedback Form19-Testing the Application manually and with Unit test20-Using userEvent to test user interaction21-Unit test Requirement for Feedback Overview component22-Feedback Overview Test for No Feedback Found23-Feedback Overview Test for 2 Feedback Found24-Developing the Feedback Overview Component and Passing data25-Executing the test cases26-How to Improve your test cases27-Requirements for Integration test scenarios28-Implementing Integration test Scenario 129-Implementing Integration test Scenario 230-Developing the functionality of adding new feedback31-Requirements overview for Mocking API calls32-Installing MSW library33-Creating MSW handler for create feedback34-Setting up the mock server35-Update the Integration test based on API call36-Make API call for saving feedback via fetch method37-How to Debug the Test case38-Deep dive into understanding the Integration test and Mock server flow39-Backend Node API and testing Frontend with Real backend

Overview

Section 1: Introduction

Lecture 1 Introduction and Course Overview

Lecture 2 Install Visual Studio Code editor

Lecture 3 Installing NodeJS runtime

Lecture 4 Why we need Testing and SDLC

Lecture 5 BDD vs TDD Testing Approach

Lecture 6 Types of Testing - UT, IT, E2E

Section 2: Writing First Test Case

Lecture 7 Creating React App and Adding Testing Capability

Lecture 8 Creating Some DOM elements for Basic Testing

Lecture 9 Writting and Running our First Test

Lecture 10 How to get the Role of an Element

Lecture 11 Understanding difference between getBy queryBy and findBy

Lecture 12 Code Hands-on for getBy queryBy

Section 3: Writing Tests for Feedback Form Component

Lecture 13 Requirements for Unit Test Cases

Lecture 14 Setup project structure and install react extension

Lecture 15 Test case for Feedback Form Onload Scenario

Lecture 16 Grouping similar Tests in one Describe block

Lecture 17 Adding user interaction to our Test with the help of fireEvent

Section 4: Developing the Feedback Form

Lecture 18 Understanding React Project Flow and Structure

Lecture 19 State variable and useState hook

Lecture 20 React Functional component and JSX

Lecture 21 Developing the Feedback Form

Lecture 22 Testing the Application manually and with Unit test

Lecture 23 Using userEvent to test user interaction

Section 5: Writing Tests for Feedback Overview Component

Lecture 24 Unit test Requirement for Feedback Overview component

Lecture 25 Feedback Overview Test for No Feedback Found

Lecture 26 Feedback Overview Test for 2 Feedback Found

Section 6: Developing Feedback Overview Component

Lecture 0 Developing the Feedback Overview Component and Passing data

Lecture 0 Executing the test cases

Lecture 27 How to Improve your test cases

Section 7: Writing Integration Test

Lecture 28 Requirements for Integration test scenarios

Lecture 0 Implementing Integration test Scenario 1

Lecture 29 Implementing Integration test Scenario 2

Lecture 0 Developing the functionality of adding new feedback

Lecture 0 Requirements overview for Mocking API calls

Lecture 0 Installing MSW library

Lecture 0 Creating MSW handler for create feedback

Lecture 0 Setting up the mock server

Lecture 0 Update the Integration test based on API call

Lecture 0 Make API call for saving feedback via fetch method

Lecture 0 How to Debug the Test case

Lecture 0 Deep dive into understanding the Integration test and Mock server flow

Lecture 0 Backend Node API and testing Frontend with Real backend

Anyone who wants to become a Professional Fullstack developer that understands the importance of writing tests for your application