This course was updated! We now recommend you take the Testing React Applications, v2 course.
Table of Contents
Bugs and How to Stop ThemWhile 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 TestsKent 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 ApplicationKent introduces the testing software used in the course and the application that will be tested.
Challenge 1: Simple Unit TestIn this challenge, students write a unit test to check a returned value is a number.
Challenge 1: SolutionKent walks through the solution to Challenge 1.
Code Coverage ReportingKent 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.
Writing Unit Tests
Writing Unit Test IntroductionWhile writing a unit test, Kent reviews best testing practices.
AssertionsKent 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 ExampleIn this challenge, students create a use case and assert the output.
Challenge 2: SolutionKent walks through the solution to Challenge 2 and reviews feedback from students.
Introducing Test-driven DevelopingKent introduces test-driven development, which is the concept of writing tests that fail before you write working code.
Challenge 3: Develop IterativelyIn this challenge, students create a function iteratively using test-driven development.
Challenge 3: SolutionKent walks through the solution to Challenge 3.
Finding a BugKent showcases fixing bugs through writing unit tests for the pre-existing code.
Missing Avatar BugKent demonstrates finding and resolving a bug in the conduit application.
Challenge 4: Test for a Newly Found BugIn this challenge, students write a test for a newly squashed bug to ensure that the bug does not reappear again.
Challenge 4: SolutionKent walks through the solution to Challenge 4.
Introducing Integration TestingKent 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 ServerKent 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 DataWith 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/AwaitKent shows how to use async/await to refactor the unit test code. Kent takes questions from students.
Challenge 5: Integration TestingIn this challenge, students create both an integration testing environment and develop unit tests.
Challenge 5: SolutionKent walks through the solution to Challenge 5 and takes questions from students.
Unit Integration for Client and Server
AuthenticationKent sets up authenticated requests with a username and password as a way to demonstrate end-to-end testing.
Client-side TestingKent builds and demonstrates client-side testing with React.
Snapshot TestingKent shows how to use snapshot testing, which is a way to test your UI component without writing actual test cases.
Visual Regression Testing QuestionsKent answers a question about visual regression testing from a student.
Simulate Event TestingTo create how a user might interact with an applications UI, Kent demonstrates how to build simulate event testing environment.
Challenge 6: Testing the EditorIn this challenge, students create a simulated environment in order an online editor.
Challenge 6: SolutionKent walks through the solution to Challenge 6 and takes questions from students.
Testing RoutesKent 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.
Introducing End-to-End TestingWhile 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 TradeoffsWhile Cypress has a lot advantages over Selenium, Kent discusses the tradeoffs with using Cypress.
Setting up Cypress TestsKent shows tests written using Cypress utility application.
Challenge 7: Cypress TestingIn this challenge, students set tests within Cypress.