Create automated testing so you can be sure you’re maintaining the highest quality JavaScript applications possible!
Kent C. Dodds shows you how to bulletproof your production applications with approaches that work in all JavaScript and Node environments, as well as showcasing how you can test React, Redux, and Node express applications.
Table of Contents
-
Testing JavaScript Applications
-
00:00:00 - 00:06:31
Introduction
Kent C. Dodds introduces his Testing JavaScript Applications course. He also reviews the course agenda and setup for coding exercises.
- http://kcd.im/testing-workshop-slides -
00:06:32 - 00:16:19
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.
- https://commons.wikimedia.org/wiki/File:H96566k.jpg
- http://heartbleed.com/
- https://en.wikipedia.org/wiki/Cloudbleed
- https://priceonomics.com/the-typo-that-destroyed-a-space-shuttle/
- https://www.jpl.nasa.gov/news/releases/99/mcoloss1.html
-
00:16:20 - 00:20:34
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.
- https://martinfowler.com/bliki/TestPyramid.html -
00:20:35 - 00:24:40
Setting up Application
Kent introduces the testing software used in the course and the application that will be tested.
- https://github.com/gothinkster/realworld - 00:24:41 - 00:28:18 Challenge 1: Simple Unit Test In this challenge, students write a unit test to check a returned value is a number.
- 00:28:19 - 00:30:03 Challenge 1: Solution Kent walks through the solution to Challenge 1.
-
00:00:00 - 00:06:31
Introduction
Kent C. Dodds introduces his Testing JavaScript Applications course. He also reviews the course agenda and setup for coding exercises.
-
Jest
-
00:30:04 - 00:36:39
Setting up Jest
Kent sets up Jest, a JavaScript testing solution developed by Facebook, and creates a simple bug for a testing demonstration.
- https://facebook.github.io/jest/ - 00:36:40 - 00:40:46 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.
- 00:40:47 - 00:42:33 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.
-
00:42:34 - 00:51:42
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.
-
00:30:04 - 00:36:39
Setting up Jest
Kent sets up Jest, a JavaScript testing solution developed by Facebook, and creates a simple bug for a testing demonstration.
-
Writing Unit Tests
- 00:51:43 - 01:00:43 Writing Unit Test Introduction While writing a unit test, Kent reviews best testing practices.
-
01:00:44 - 01:03:16
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.
- https://facebook.github.io/jest/docs/expect.html - 01:03:17 - 01:07:50 Challenge 2: Practical Example In this challenge, students create a use case and assert the output.
- 01:07:51 - 01:15:00 Challenge 2: Solution Kent walks through the solution to Challenge 2 and reviews feedback from students.
-
Test-driven Development
- 01:15:01 - 01:22:47 Introducing Test-driven Developing Kent introduces test-driven development, which is the concept of writing tests that fail before you write working code.
-
01:22:48 - 01:24:53
Jest vs. Mocha
Kent answers a student question about the comparison of Jest and Mocha, another feature-rich JavaScript test framework.
- https://mochajs.org/ - 01:24:54 - 01:26:35 Challenge 3: Develop Iteratively In this challenge, students create a function iteratively using test-driven development.
- 01:26:36 - 01:33:08 Challenge 3: Solution Kent walks through the solution to Challenge 3.
-
Fixing Bugs
- 01:33:09 - 01:37:05 Finding a Bug Kent showcases fixing bugs through writing unit tests for the pre-existing code.
- 01:37:06 - 01:41:50 Missing Avatar Bug Kent demonstrates finding and resolving a bug in the conduit application.
- 01:41:51 - 01:44:38 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.
- 01:44:39 - 01:53:13 Challenge 4: Solution Kent walks through the solution to Challenge 4.
-
Integration Tests
- 01:53:14 - 02:00:53 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.
- 02:00:54 - 02:08:03 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.
-
02:08:04 - 02:29:49
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.
- https://github.com/marak/Faker.js/ - 02:29:50 - 02:44:50 Async/Await Kent shows how to use async/await to refactor the unit test code. Kent takes questions from students.
- 02:44:51 - 02:50:16 Challenge 5: Integration Testing In this challenge, students create both an integration testing environment and develop unit tests.
- 02:50:17 - 03:09:58 Challenge 5: Solution Kent walks through the solution to Challenge 5 and takes questions from students.
-
Unit Integration for Client and Server
- 03:09:59 - 03:24:26 Authentication Kent sets up authenticated requests with a username and password as a way to demonstrate end-to-end testing.
-
03:24:27 - 03:46:13
Client-side Testing
Kent builds and demonstrates client-side testing with React.
- https://github.com/airbnb/enzyme - 03:46:14 - 04:05:09 Snapshot Testing Kent shows how to use snapshot testing, which is a way to test your UI component without writing actual test cases.
- 04:05:10 - 04:09:06 Visual Regression Testing Questions Kent answers a question about visual regression testing from a student.
- 04:09:07 - 04:21:03 Simulate Event Testing To create how a user might interact with an applications UI, Kent demonstrates how to build simulate event testing environment.
- 04:21:04 - 04:24:02 Challenge 6: Testing the Editor In this challenge, students create a simulated environment in order an online editor.
- 04:24:03 - 04:34:31 Challenge 6: Solution Kent walks through the solution to Challenge 6 and takes questions from students.
- 04:34:32 - 04:54:04 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
-
04:54:05 - 05:05:36
Introducing End-to-End Testing
While introduces end-to-end testing, Kent demonstrates Cypress, a testing utility.
- https://www.cypress.io/
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 - 05:05:37 - 05:09:18 Cypress Tradeoffs While Cypress has a lot advantages over Selenium, Kent discusses the tradeoffs with using Cypress.
- 05:09:19 - 05:19:44 Setting up Cypress Tests Kent shows tests written using Cypress utility application.
- 05:19:45 - 05:21:14 Challenge 7: Cypress Testing In this challenge, students set tests within Cypress.
-
04:54:05 - 05:05:36
Introducing End-to-End Testing
While introduces end-to-end testing, Kent demonstrates Cypress, a testing utility.
-
Wrapping Up Testing JavaScript Applications