Testing JavaScript Applications (feat. React and Redux)
Topics:
This course was updated! We now recommend you take the Testing React Applications, v2 course.
Table of Contents
Testing JavaScript Applications
Introduction
Kent C. Dodds introduces his Testing JavaScript Applications course. He also reviews the course agenda and setup for coding exercises.
Bugs and How to Stop Them
While covering the types of bugs that occur in programming, Kent discusses major bugs that have happened in history and how programmers can prevent them.
Types of Tests
Kent discusses types of testing covered in this course: unit, integration, and end-to-end. He also discusses Test Pyramid, which supposes that unit testing is useful for both speed and financial reasons.
Setting up Application
Kent introduces the testing software used in the course and the application that will be tested.
Challenge 1: Simple Unit Test
In this challenge, students write a unit test to check a returned value is a number.
Challenge 1: Solution
Kent walks through the solution to Challenge 1.
Jest
Setting up Jest
Kent sets up Jest, a JavaScript testing solution developed by Facebook, and creates a simple bug for a testing demonstration.
Code Coverage Reporting
Kent introduces the concept of code coverage, a measure used to describe the degree to which the source code of a program is tested by a particular test suite. He shows how to generate code coverage reports within Jest and then use those reports as a way to stop code from being deployed if they coverage drops below a certain percentage.
Removing JSDOM
Kent shows that JSDom, a JavaScript based headless browser that can be used to create a realistic testing environment, is a part of Jest, which can be removed for faster performance testing within Jest if you are working primarily in node.
Feature Setting
Kent demonstrates various features with Jest: watch mode, which allows for running tests concurrently with development; filtering, to quickly find unit tests by name; test function, which allows the ability to skip tests until they are ready; and Babel integration, which allows for the use of a JavaScript compiler. While writing a unit test, Kent reviews best testing practices.
Writing Unit Tests
Writing Unit Test Introduction
While writing a unit test, Kent reviews best testing practices.
Assertions
Kent introduces Jest's expect() function. When you're writing tests, you often need to check that values meet certain conditions and expect() gives you access to some "matchers" that let you validate different things depending on what needs to be tested.
Challenge 2: Practical Example
In this challenge, students create a use case and assert the output.
Challenge 2: Solution
Kent walks through the solution to Challenge 2 and reviews feedback from students.
Test-driven Development
Introducing Test-driven Developing
Kent introduces test-driven development, which is the concept of writing tests that fail before you write working code.
Jest vs. Mocha
Kent answers a student question about the comparison of Jest and Mocha, another feature-rich JavaScript test framework.
Challenge 3: Develop Iteratively
In this challenge, students create a function iteratively using test-driven development.
Challenge 3: Solution
Kent walks through the solution to Challenge 3.
Fixing Bugs
Finding a Bug
Kent showcases fixing bugs through writing unit tests for the pre-existing code.
Missing Avatar Bug
Kent demonstrates finding and resolving a bug in the conduit application.
Challenge 4: Test for a Newly Found Bug
In this challenge, students write a test for a newly squashed bug to ensure that the bug does not reappear again.
Challenge 4: Solution
Kent walks through the solution to Challenge 4.
Integration Tests
Introducing Integration Testing
Kent introduces integration tests, which is when units that have already been tested individual are then combined and tested. Kent then reviews the application used as a learning tool for integration testing.
Setting up the Server
Kent walks through the process of integration testing by first getting the server to start and then stop after runnings its tests. Afterward, Kent takes a question from a student.
Using Fake Data
With the server available for testing, Kent starts building test units by integrating fake, random test data. Kent likes using random test data as a way of revealing bugs that potentially might not other have shown. Kent takes questions from students.
Async/Await
Kent shows how to use async/await to refactor the unit test code. Kent takes questions from students.
Challenge 5: Integration Testing
In this challenge, students create both an integration testing environment and develop unit tests.
Challenge 5: Solution
Kent walks through the solution to Challenge 5 and takes questions from students.
Unit Integration for Client and Server
Authentication
Kent sets up authenticated requests with a username and password as a way to demonstrate end-to-end testing.
Client-side Testing
Kent builds and demonstrates client-side testing with React.
Snapshot Testing
Kent shows how to use snapshot testing, which is a way to test your UI component without writing actual test cases.
Visual Regression Testing Questions
Kent answers a question about visual regression testing from a student.
Simulate Event Testing
To create how a user might interact with an applications UI, Kent demonstrates how to build simulate event testing environment.
Challenge 6: Testing the Editor
In this challenge, students create a simulated environment in order an online editor.
Challenge 6: Solution
Kent walks through the solution to Challenge 6 and takes questions from students.
Testing Routes
Kent shows how to set up a testing for routes, making sure a browser moves from page to page as intended. Then Kent answers student questions and shows Challenge 7 that students can work on in their own time.
End-to-End Testing
Introducing End-to-End Testing
While introduces end-to-end testing, Kent demonstrates Cypress, a testing utility. If Cypress has a waitlist for signing-up, you can download it directly and use it without registering: https://docs.cypress.io/docs/installing-and-running#section-direct-download
Cypress Tradeoffs
While Cypress has a lot advantages over Selenium, Kent discusses the tradeoffs with using Cypress.
Setting up Cypress Tests
Kent shows tests written using Cypress utility application.
Challenge 7: Cypress Testing
In this challenge, students set tests within Cypress.
