Watch Later

Intro to Fundamentals of Testing in JavaScript

Throw an Error with a Simple Test in JavaScript

Abstract Test Assertions into a JavaScript Assertion Library

Encapsulate and Isolate Tests by building a JavaScript Testing Framework

Support Async Tests with JavaScripts Promises through async await

Provide Testing Helper Functions as Globals in JavaScript

Verify Custom JavaScript Tests with Jest

Intro to JavaScript Mocking Fundamentals

Override Object Properties to Mock with Monkey-patching in JavaScript

Ensure Functions are Called Correctly with JavaScript Mocks

Restore the Original Implementation of a Mocked JavaScript Function with jest.spyOn

Mock a JavaScript module in a test

Make a shared JavaScript mock module

Intro to Configure Jest for Testing JavaScript Applications

Install and Run Jest

Compile Modules with Babel in Jest Tests

Configure Jest’s Test Environment for Testing Node or Browser Code

Support Importing CSS files with Jest’s moduleNameMapper

Support using Webpack CSS Modules with Jest

Generate a Serializable Value with Jest Snapshots

Test an Emotion Styled UI with Custom Jest Snapshot Serializers

Support Custom Module Resolution with Jest moduleDirectories

Configure Jest to Run Setup for All Tests with Jest setupFilesAfterEnv

Support a Test Utilities File with Jest moduleDirectories

Use Jest Watch Mode to Speed Up Development

Step through Code in Jest using the Node.js Debugger and Chrome DevTools

Configure Jest to Report Code Coverage on Project Files

Analyze Jest Code Coverage Reports

Set a Code Coverage Threshold in Jest to Maintain Code Coverage Levels

Report Jest Test Coverage to Codecov through TravisCI

Run Jest Watch Mode by Default Locally with is-ci-cli

Run Tests with a Different Configuration using Jest’s --config Flag and testMatch Option

Support Running Multiple Configurations with Jest’s Projects Feature

Run ESLint with Jest using jest-runner-eslint

Test Specific Projects in Jest Watch Mode with jest-watch-select-projects

Filter which Tests are Run with Typeahead Support in Jest Watch Mode

Run Only Relevant Jest Tests on Git Commit to Avoid Breakages

What's changed in Test React Components with Jest and React Testing Library

Intro to Test React Components with Jest and React Testing Library

Render a React Component for Testing

Use Jest DOM for Improved Assertions

Use DOM Testing Library to Write More Maintainable React Tests

Use React Testing Library to Render and Test React Components

Debug the DOM State During Tests using React Testing Library’s debug Function

Test React Component Event Handlers with fireEvent from React Testing Library

Improve Test Confidence with the User Event Module

Test Prop Updates with React Testing Library

Assert That Something is NOT Rendered with React Testing Library

Test Accessibility of Rendered React Components with jest-axe

Mock HTTP Requests with jest.mock in React Component Tests

Mock HTTP Requests with MSW

Mock react-transition-group in React Component Tests with jest.mock

Test componentDidCatch Handler Error Boundaries with React Testing Library

Hide console.error Logs when Testing Error Boundaries with jest.spyOn

Ensure Error Boundaries Can Successfully Recover from Errors

Use React Testing Library’s Wrapper Option to Simplify using rerender

Test Drive the Development of a React Form with React Testing Library

Test Drive the Submission of a React Form with React Testing Library

Test Drive Mocking react-router’s Redirect Component on a Form Submission

Test Drive the API Call of a React Form with React Testing Library

Test Drive Assertions with Dates in React

Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability

Test Drive Error State with React Testing Library

Write a Custom Render Function to Share Code between Tests and Simplify Tests

Test React Components that Use the react-router Router Provider with createMemoryHistory

Initialize the history Object with a Bad Entry to Test the react-router no-match Route

Create a Custom render Function to Simplify Tests of react-router Components

Test a Redux Connected React Component

Test a Redux Connected React Component with Initialized State

Create a Custom Render Function to Simplify Tests of Redux Components

Test a Custom React Hook with React’s Act Utility and a Test Component

Write a Setup Function to Reduce Duplication of Testing Custom React Hooks

Test a Custom React Hook with renderHook from React Hooks Testing Library

Test Updates to Your Custom React Hook with rerender from React Hooks Testing Library

Test React Portals with within from React Testing Library

Test Unmounting a React Component with React Testing Library

Write React Application Integration Tests with React Testing Library

Improve Reliability of Integration Tests using find* Queries from React Testing Library

Improve Reliability of Integration Tests Using the User Event Module

What's changed in Install, Configure, and Script Cypress for JavaScript Web Applications

Intro to Install, Configure, and Script Cypress for JavaScript Web Applications

Install and Run Cypress

Write the First Cypress Test

Configure Cypress in cypress.json

Installing Cypress Testing Library

Script Cypress for Local Development and Continuous Integration

Debug a Test with Cypress

Test User Registration with Cypress

Cypress Driven Development

Simulate HTTP Errors in Cypress Tests

Test User Login with Cypress

Create a User with cy.request from Cypress

Keep Tests Isolated and Focused with Custom Cypress Commands

Use Custom Cypress Command for Reusable Assertions

Run Tests as an Authenticated User with Cypress

Use cy.request from Cypress to Authenticate as a New User

Use a Custom Cypress Command to Login as a User

Combine Custom Cypress Commands into a Single Custom Command

Install React DevTools with Cypress

Intro to Use DOM Testing Library to test any JS framework

Use DOM Testing Library with React

Use DOM Testing Library with Preact

Use DOM Testing Library with jQuery

Use DOM Testing Library with Dojo

Use DOM Testing Library with HyperApp

Use DOM Testing Library with AngularJS

Use DOM Testing Library with Angular

Use DOM Testing Library with VueJS

Use DOM Testing Library with Mithril

Use DOM Testing Library with Svelte

Use DOM Testing Library with from-html

Intro to Test Node.js Backends

Test Pure Functions Overview

Write Unit Tests for a Simple Pure Function

Improve Error Messages by Generating Test Titles

Use jest-in-case to Reduce Duplication and Improve Test Titles

Create a Casify Function to Generate Cases for jest-in-case

Test Node Middleware Overview

Write a Unit Test for Handling an UnauthorizedError

Write a Unit Test for Handling headersSent in an Error Middleware

Write a Unit Test for Status 500 Error Middleware Fallback

Improve Test Maintainability using the Test Object Factory Pattern

Use a Test Object Factory utils/generate

Test Node Controllers Overview

Write a Unit Test for a Controller by Mocking the Database

Simplify Assertions on Error Messages with toMatchInlineSnapshot

Unit Test Business Logic of a Controller’s Middleware

Test Controller 404 Edge Case where Resource is Not Found

Test Controller Unauthorized Case

Test getListItems for Getting Multiple Mock Objects

Test the Happy Path of a Creation Flow

Testing an Error Case for createListItem

Testing the Happy Path for updateListItem

Testing Resource Deletion

Test Authentication API Routes Overview

Start a Node Server and Fire a Request to an HTTP API Endpoint

Make Assertions on HTTP API Responses for Registration

Test the Login Endpoint for a Node Server

Test the User’s Resource Endpoint

Create a Pre-configured axios Client for the baseURL

Improve Error Messages with an axios Interceptor

Ensure a Unique Server Port

Use Snapshots to Assert on Server Error Responses

Interact Directly with the Database

Test all the Edge Cases

Test CRUD API Routes Overview

Write an Integration Test for a Resource Create Endpoint

Write an Integration Test for a Resource Read Endpoint

Integration Test a Resource Update Endpoint

Integration Test a Resource Delete Endpoint

Snapshot the Error Message with Dynamic Data

Intro to Static Analysis Testing JavaScript Applications

Lint JavaScript by Configuring and Running ESLint

Use the ESLint Extension for VSCode

Use pre-built ESLint Configuration using extends

Run ESLint with npm Scripts

Format Code by Installing and Running Prettier

Configure Prettier

Use the Prettier Extension for VSCode

Disable Unnecessary ESLint Stylistic Rules with eslint-config-prettier

Validate All Files are Properly Formatted with Prettier

Avoid Common Errors by Installing and Configuring TypeScript

Make ESLint Support TypeScript Files

Validate Code in a pre-commit git Hook with husky

Auto-format All Files and Validate Relevant Files in a precommit Script with lint-staged

Run Multiple npm Scripts in Parallel with npm-run-all