Testing JavaScript Applications Workshop

Why, What, Where, When, and How of Unit, Integration, and E2E

Kent C. Dodds

Utah

1 wife, 3 kids

PayPal, Inc.

@kentcdodds

Please Stand...

if you are able

What this workshop is

  • Practical - Uses real world application
  • Why, how, where, and what to test
  • Comparison of various forms of testing
  • Demo of Jest and Cypress tooling setup
  • Writing unit & integration tests for Express
  • Writing unit & integration tests for React
  • Writing E2E tests for the whole application

What this workshop is not

  • Free of tradeoffs
  • Covering ALL forms of testing
  • 8 hour powerpoint presentation!
  • Too technology-specific

Let's
Get
STARTED!

Setup

git clone https://github.com/kentcdodds/testing-workshop.git

cd testing-workshop

npm run setup --silent

What kind of bugs are there?

Business Logic 🕷

Security 🕷

Accessibility 🐜

User Interface 🐞

Performance 🐛

Regression 🐞

Internationalization 🕷

Integration 🐜

Scaling 🐛

What are the worst bugs you've heard of?

Heartbleed       (xkcd)

How do we prevent bugs?

  1. Static Types: Flow / TypeScript
  2. Linting: ESLint
  3. Testing: ??

What kinds of testing can we do?

Unit Testing

Regression Testing

Integration Testing

E2E Testing

Smoke Testing

Usability Testing

i18n Testing

Penetration Testing

User Acceptance Testing

Performance Testing

A/B Testing

a11y Testing

Stress Testing

Fuzz Testing

What is a Unit Test?

What is an Integration Test?

What is an End to End Test?

Where do we focus our time?

App Time...

Also big thanks to:

App Folder Structure

.
├── api
│   ├── demo
│   │   ├── integration...
│   │   └── unit...
│   ├── src...
│   └── tests...
├── api-final
│   ├── demo
│   │   ├── integration...
│   │   └── unit...
│   ├── src...
│   └── tests...
├── client
│   ├── demo
│   │   └── unit...
│   ├── src...
│   └── tests
│       └── integration...
├── client-final
│   ├── demo
│   │   └── unit...
│   ├── src...
│   └── tests
│       └── integration...
├── cypress
│   ├── e2e...
│   └── support
└── INSTRUCTIONS.md

Setting up Jest

🚗 Test Driven Development 🏎

Red

Green

Refactor

🐛 Fixing Bugs 🐜

Bug

Find Code

Write Test

Fix Test

Snapshot testing

📸

Resources

Thank you!

Testing Workshop

By Kent C. Dodds

Testing Workshop

1. Unit Testing with [Jest](http://facebook.github.io/jest) 2. Integration Testing with [Jest](http://facebook.github.io/jest) 3. End to End (E2E) Testing with [Cypress](https://www.cypress.io/) We'll mention other forms of testing, but these are the types we'll focus on and learn in this workshop. We'll learn about the benefits (and tradeoffs) of [TDD](https://en.wikipedia.org/wiki/Test-driven_development). We'll learn how to configure the tools and why, when, where, and what to test.

  • 15,441