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

kcd.im/testing-workshop-slides

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

git.io/testing-workshop

https://en.wikipedia.org/wiki/Software_bug#/media/File:H96566k.jpg

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?

In 1999, NASA lost a $125 million Mars orbiter 🚀

In 1962, NASA's $80 million rocket exploded 🚀

Cloudbleed ☁️🆎

Heartbleed (xkcd)

How do we prevent bugs?

Static Types: Flow / TypeScript
Linting: ESLint
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?

twitter.com/Una/status/850451564527591424

What is an Integration Test?

twitter.com/Una/status/850451564527591424

What is an End to End Test?

twitter.com/Una/status/850451564527591424

Where do we focus our time?

martinfowler.com/bliki/TestPyramid.html

testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html

App Time...

realworld.io

Also big thanks to:

github.com/kentcdodds/testing-workshop#contributors

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