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?
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?
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.mdSetting 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/jesthttp://facebook.github.io/jest 2. Integration Testing with [Jest](http://facebook.github.io/jesthttp://facebook.github.io/jest 3. End to End (E2E) Testing with [Cypress](https://www.cypress.io/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_developmenthttps://en.wikipedia.org/wiki/Test-driven_developmenthttps://en.wikipedia.org/wiki/Test-driven_development We'll learn how to configure the tools and why, when, where, and what to test.
