React Testing - Code and Test 3 React Web Apps

Name: React Testing - Code and Test 3 React Web Apps
Rating: 3.8 (37 reviews)

Code and test 3 ReactJs web applications using Cypress, WebDriverIO, HappoIO

Created byNikolay Advolodkin

Last updated 6/2022

English

What you'll learn

Code A Simple React App
Visual Testing And Deploy To Microsoft Azure
Create A Birthday Reminder React Application with Full Testing
Build & Test A Dev Portfolio Website

Course content

3 sections • 32 lectures • 1h 59m total length

Introduction0:46
Create a simple React web app in under five minutes, test components with a React custom library, and deploy via GitHub actions and Azure Static Web Apps.
Creating React App1:51
Running First Test1:53
Create React App provides a ready-to-modify app and a built-in unit test runnable with npm test, rendering via React testing library and verifying Learn, React is in the document.
Creating a CI Pipeline5:06
Add a Link test5:06
Add Visual Testing7:53
Extend your CI pipeline with visual testing using web driver IO to capture home page snapshots across desktop and mobile, compare to baselines, and accept approved differences.
Making An Image Change2:57
Releasing to Azure Static Web Apps4:43
Creating CI for production testing4:45
Update app assets, rename images, and integrate a production CI pipeline in Azure, adding visual tests for production and adjusting the base URL to validate the CI workflow.
Finalizing production build for CI2:12
Conclusion0:49

Introduction0:27
Birthday Reminder Set Up5:11
Static UI Created4:12
Build a React UI with a main wrapper and container, show birthdays in an h3, import a list component, and add a button that logs to the console on click.
List Component5:32
Build a dynamic list component that maps over a people array, destructures name, age, image, and id, and renders each as an article with an image and name.
OnClick() Implemented0:59
What Is Your Testing Strategy3:44
Explore a testing strategy for a React web app, using the testing pyramid, prioritizing end-to-end tests, validating DOM, database, and visual look-and-feel with two validation points in one test.
Installing WDIO3:50
Run WDIO Test1:40
Visual E2E Testing9:24
Conclusion0:09

Introduction0:47
Website Overview2:03
Source Code Overview3:27
Code Header Overview4:27
Build a header component with styled components and a home link, plus a social details component with social icons. Implement responsive navigation and icon-driven links for a React web app.
Testing Strategy for Header3:35
Visual E2E Tests with Happo6:31
E2E Cypress Tests6:27
Hero Section4:32
Projects Section4:08
Jest Snapshot Tests10:14
BONUS LECTURE0:16

Requirements

Knowledge of JavaScript
Knowledge of HTML and CSS
Basic understanding of React

Description

In this 3-part video tutorial, we will train you on how to code and test 3 beautiful ReactJS web applications even without React App testing experience.

You’ll Learn:

Creating A React App and Deploy to Microsoft Azure

Creating a React App
Running First Test
Creating a Pipeline
Add a Link Test
Add Visual Testing
Making an Image Change
Releasing to Azure Static Web Apps
Creating CI for Production Testing
Finalizing Production Build for CI

Birthday Reminder React App with Full Testing

Birthday Reminder Project Setup
Static UI Created
List Component
onClick() Implemented
What is Our Testing Strategy
Installing WDIO
Run WDIO Test
Visual e2e Testing
Conclusion

Build & Test A Portfolio Website

Website Overview
Source Code Overview
Code Header Overview
Testing Strategy for Header
Visual E2E Tests with Happo
E2E Cypress Tests
Hero Section
Projects Section
Jest Snapshot Tests

Ready to start? Check out the full curriculum and jump into the tutorial.

What our students are saying?

"I appreciate the time the instructor put on this course as well as the opportunity to get familiar with TestProject free of charge. Well explained, however, if you are using Windows and you are new in Automation Testing, you might find it a bit challenging with adding the SDK Token in your system environment since the instruction used MAC which is completely a different way with windows. Other than that... I appreciate a lot this free course .... thank you so much"

“Wonderful content and things explained in a nutshell. Overwhelmed by Author's dedication to putting things in such a way that any novice or manual tester can follow and understand and definitely be on-boarded as a Selenium Automation Engineer the next day at work. Thanks a million times for creating these courses! One Stop for Automation."- Rupashree Geethaaviji Ananthakrishna

“I am familiar with Nikolay from a course I saw on TestAutomation and have the highest regard for him. Glad to see him on Udemy.” - Annamalai Viswanathan

Who this course is for:

Intermediate developers looking to learn how to test web applications

React Testing - Code and Test 3 React Web Apps

What you'll learn

Explore related topics

Course content

Creating React Web App and Deploy to Microsoft Azure11 lectures • 38min

Birthday Reminder React App with Full Testing10 lectures • 35min

Build & Test A Portfolio Website11 lectures • 46min

Requirements

Description

Who this course is for: