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!