Write tests. Not too many. Mostly integration.
Kent C. Dodds
Utah
1 wife, 4 kids
PayPal, Inc.
@kentcdodds
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/2504801/slides-logo-black-1400x550-e5784ee4ba30e28a9b9ddf59ca5651a6.png)
Please Stand...
if you are able
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/1237297/smile.png)
What this talk is
- Dissecting Guillermo's tweet
- High level principles
- Opinionated
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/1237299/grinning.png)
What this talk is not
- Bashing on other tools or methodologies
- Full of gifs
- 725 slides ๐ต
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/1237298/neutral_face.png)
Let's
Get
STARTED!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/3174548/car.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/3174549/dash.png)
The infamous tweet
(more than famous)
Write tests.
Why do we write tests?
Confidence!
Enhanced Workflows
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4602850/why-write-tests.gif)
Not too many.
Let's talk about "code coverage"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4602880/Screen_Shot_2018-02-12_at_8.20.28_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4602884/Screen_Shot_2018-02-12_at_8.23.48_PM.png)
How much code coverage do you need?
Good question!
It dependsโข
Remember this?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4636319/IMG_20180222_104642.jpg)
Implementation Details
๐ก
if your test does something that the consumer of your code doesn't then it's testing implementation details
๐ก
๐ก
if a refactor breaks your tests, then it's testing implementation details
๐ก
Mostly integration.
The Testing Pyramid
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4636350/pyramid.jpg)
The Gleb Pyramid
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4636964/gleb-pyramid.jpg)
The Aaron Square
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4636970/arron-square.jpg)
The Testing Dorito
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4636355/testing-dorito.jpg)
Static Code Analysis
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4602967/Screen_Shot_2018-02-12_at_9.27.50_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4602968/Screen_Shot_2018-02-12_at_9.30.37_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4602973/flow-typed-logo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4602978/eslint-logo.jpg)
Unit tests
function sum(a, b) {
return a + b
}
test('sum adds numbers', () => {
expect(sum(1, 3)).toBe(4)
})
Integration tests
let api, server
beforeAll(async () => {
server = await startServer()
const {port} = server.address()
api = axios.create({
baseURL: `http://localhost:${port}/api`
})
})
afterAll(() => server.close())
beforeEach(() => resetDb())
test('can register a user', async () => {
const registerData = {username: 'bob', password: 'wiley'}
const testUser = await api
.post('auth/register', registerData)
.then(response => response.data.user)
expect(testUser.username).toBe(registerData.username)
const readUserUnauthenticated = await api
.get(`users/${testUser.id}`)
.then(response => response.data.user)
expect(readUserUnauthenticated).toEqual(testUser)
})
End-to-end tests
describe('authentication', () => {
it('should allow users to register', () => {
const user = {username: 'bob', password: 'wiley'}
cy
.visitApp()
.getByTestId('register-link')
.click()
.getByTestId('username-input')
.type(user.username)
.getByTestId('password-input')
.type(user.password)
.getByTestId('login-submit')
.click()
cy
.url()
.should('equal', 'http://localhost:3000/')
cy
.getByTestId('username-display')
.should('contain', user.username)
})
})
The Testing Trophy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/4579002/testing-trophy.png)
๏ฟ heap
๐ฐ๐ค๐ฐ
๐๐จ
๐ข
Simple problems ๐
Big problems ๐
Integration tests provide the best balance of:
- ๏ฟ heap
- ๐๐จ
- ๐
But how? ๐ค
Poke fewer holes in reality!
Test higher up your tree
๐ Thanks Guillermo! ๐
Thank you!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/3174555/wave.png)
๐ kcd.im/write-tests-feedbackย ๐
resources on the next slide ๐
Resources
- "Write tests. Not too many. Mostly Integration."ย (My blog post version)
- My Testing Workshops
- Cypress.io
- Jest ๐
- Thoughts on Testing React Componentsย (15 minute video analyzing React tests)
- But really, what is a JavaScript Test?
- kcd.im/news and blog.kentcdodds.com (lots of testing content there)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/55780/images/3174556/books.png)
Write tests. Not too many. Mostly integration.
By Kent C. Dodds
Write tests. Not too many. Mostly integration.
Guillermo Rauch tweeted this a while back. Letโs take a quick dive into what it means.
- 8,232