狠狠撸

An Existential Guide to
Testing React UIs

Who am I?
@bookstein
Artist: Alexandra Levasseur

What is this all about?
● Unit tests
● Existentialism

Existential Testing Questions
● Should we write unit tests
for the UI?
● What matters to test?
● What should we not test?

Should we write unit tests for the UI?

Should we write unit tests for the UI?
YES

Let’s get existential about tests

What matters to
test?
What matters to
not test?

There’s no recipe
“Ten or twenty years from now we'll likely
have a more universal theory of which tests to
write, which tests not to write, and how to tell
the difference. In the meantime,
experimentation seems in order.”
- Kent Beck, test coverage guy
Artist: Andrew Baines

So why am I talking about this?

The component to test
friend.js

1. Happy path
2. Behavior
3. Edge cases

1. Happy path
The DOM output you
expect

1. Happy path // how do snapshots work?
capture markup

1. Happy path // how do snapshots work?
exports[`renders without crashing 1`] = `
<div className=”Friend”>
<div>
<h1>myFriendName</h1>
<p className=”Friend__Tags”>
Tags:
...
friend.test.js.snap

it('renders without crashing', () => {
const component = renderer.create(<Friend {...PROPS}
/>)
// ...
})
1. Happy path // snapshot test
friend.test.js

it('renders without crashing', () => {
const component = renderer.create(<Friend {...PROPS}
/>)
let tree = component.toJSON()
expect(tree).toMatchSnapshot()
})
friend.test.js

2. Behavior
What should it do?

2. Behavior // Enzyme
Traverse/manipulateWrap component

2. Behavior // User input
friend.js

it('calls the `remove` callback on click', () => {
const wrapper = shallow(<Friend {...PROPS}/>)
// ...
})
friend.test.js

const removeFriend = jest.fn()
// ...pass in removeFriend with PROPS
// ...
})
friend.test.js

const removeFriend = jest.fn()
wrapper.find(`.Friend_X’).simulate(‘click’)
expect(removeFriend).toHaveBeenCalled()
})
friend.test.js

3. Edge cases
Bad things happen

3. Edge cases // Jest mocks
MocksSnapshots

3. Edge cases // Mock network error
friendsList.js

export const pushToDatabase = (data) => {
return firebase
.database()
.ref(‘friends’)
.push()
.set(data)
}
firebaseService.js

jest.mock(‘../firebaseService’, () => {
return {
pushToDatabase: jest.fn(),
}
})
friendsList.test.js

it('sets error state if Firebase returns err’, (done) => {
firebaseService.pushToDatabase
.mockImplementationOnce(() => // ...
})
friendsList.test.js

it('sets error state if Firebase returns err’, (done) => {
firebaseService.pushToDatabase
.mockImplementationOnce(() => Promise.reject(‘you got an
error!’))
// ...
})
friendsList.test.js

1. Happy path 2. Behavior 3. Edge cases

A brand new test
// HAPPY PATH:
// component renders as we expect
// BEHAVIOR:
// what behavior does the component itself have?
// EDGE CASES:
// what failure cases should our component handle?
friendsList.test.js

Yay! Our UI is tested!
Artist: Rafal Olbinski

Not in a unit test
● server logic
Artist: Rene Magritte

Not in a unit test
● server logic
● 3rd party components

Not in a unit test
● server logic
● anything you can’t
control

An example edge
class FriendsList {
componentDidMount() {
firebase.database()...on('child_added',
snapshot => {// update state})
}
friendsList.js

An example edge
firebase.database()friendsList.js

Let’s move the edge
class FriendsList {
firebase.database()...on('child_added',
snapshot => {// update state})
}
friendsList.js

Let’s move the edge
import { listenForUpdates } from ‘../firebaseService’
class FriendsList {
listenForUpdates(snapshot => // update state)
}
friendsList.js

So cutting-edge
Firebase
Service.
js

So cutting-edge
FAKE
Firebase
Service.
js

Tests should
influence
component
design

What to not test
● server logic
● things beyond the
edges
Artist: Rene Magritte

Should we write unit tests?
YES

What matters to test?
1. Happy path 2. Behavior 3. Edge cases

Social Justice Fund is awesome

@bookstein
/donation-tracking
Be in touch
● React development & testing
● Existential questions
● Social Justice Fund

Artists featured: Alexandra Levasseur,
Andrew Baines, Edvard Munch, Rene
Magritte, Rafal Olbinski, Salvador Dali
● React development & testing
● Existential questions
● Social Justice Fund
Thanks!
@bookstein
/donation-tracking

狠狠撸

An existential guide to testing React UIs

Recommended

More Related Content

Similar to An existential guide to testing React UIs (20)

Recently uploaded (20)

An existential guide to testing React UIs