Test-Driven Development in React with Cypress

Test-Driven
Development
in React with Cypress
Josh Justice
1 TDD in React with Cypress - @CodingItWrong - connect.tech 2018

@CodingItWrong
I want to help developers
build great apps and go home.

We're hiring!
bignerdranch.com/careers

JavaScript
Testing
Is Getting Big

Test-Driven Development:
Writing your tests
before you write
the code that passes them.

Why
TDD?7 TDD in React with Cypress - @CodingItWrong - connect.tech 2018

1. A Way to
Get Started
Testing8 TDD in React with Cypress - @CodingItWrong - connect.tech 2018

2. Help Avoiding
Testing the
Implementation

3. Simple
Design10 TDD in React with Cypress - @CodingItWrong - connect.tech 2018

Focusing on
Functionality

Focusing on
Functionality
-> Spaghetti

Focusing on
Design

Focusing on
Design
-> Deterioration14 TDD in React with Cypress - @CodingItWrong - connect.tech 2018

Focusing on
Flexibility

Focusing on
Flexibility
-> Overdesign

1. Spaghetti
2. Design Deterioriation
3. Overdesign

2 Guidelines

1. Build the
bare minimum
you need right now

2. Make the code
easy to change
for when you need
something else

Minimal,
Changeable
Code21 TDD in React with Cypress - @CodingItWrong - connect.tech 2018

Visualize
the
Payoff22 TDD in React with Cypress - @CodingItWrong - connect.tech 2018

TDD

Outside-In TDD

Requirement:
As a user, I want to be able to
send a message.

Write a feature test
that specifies what the
user wants to do.

describe('Creating a message', () => {
it('Displays the message in the list', () => {
cy.visit('http://localhost:3000');
cy.get('[data-test="messageText"]')
.type('New message');
cy.get('[data-test="saveButton"]')
.click();
cy.get('[data-test="messageText"]')
.should('have.value', '');
cy.contains('New message');
});
});

Run the test and watch
it fail.

Write only enough code
to fix the current error
or failure.

import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
</div>
);
}
}

Write the code you
wish you had.

import React, { Component } from 'react';
import NewMessageForm from './NewMessageForm';
render() {
return (
<div>
<NewMessageForm />
</div>
);
}
}

export default class NewMessageForm extends Component {
render() {
return (
<div>
<input
type="text"
data-test="messageText"
/>
</div>
);
}
}

Focusing on fixing the
current error keeps
your code minimal, so
easier to change

Rerun the feature test
and see what
the next failure is

return (
<div>
<input
type="text"
/>
<button
data-test="saveButton"
>
Save
</button>
</div>
);

When you get a
behavior error,
step down to a
component test.

Component tests keep
your code changeable:
the component
behavior is specified,
so we can reuse it.

Write just enough
component test to
reproduce the feature
test failure.

describe('<NewMessageForm />', () => {
describe('clicking the save button', () => {
it('clears the text ﬁeld', () => {
mount(<NewMessageForm />);
cy.get('[data-test="messageText"]').type('New message');
cy.get('[data-test="saveButton"]').click();
cy.get('[data-test="messageText"]').should('have.value', '');
});
});
});

render() {
const { inputText } = this.state;
return (
<div>
<input
type="text"
value={inputText}
onChange={this.handleTextChange}
/>
<button
data-test="saveButton"
onClick={this.handleSave}
>
Save
</button>

export default class NewMessageForm extends Component {
state = { inputText: '' }
handleTextChange = (event) => {
this.setState({ inputText: event.target.value });
}
handleSave = () => {
this.setState({ inputText: '' });
}
render() {

When the Component Test Passes,
Step back up to the feature
test to see the next failure

});
});
});

Contract Testing
“Other components can assume the component will fulfill its
contractual promise that it will produce the expected output if given
the correct input.”
-- Edd Yerburgh, Testing Vue.js Applications

Testing the contract
lets you change the
implementation.

Make
One Assertion Per Test
in Unit Tests

beforeEach(() => {
});
});
});
});

let saveHandler;
beforeEach(() => {
saveHandler = cy.spy();
mount(<NewMessageForm onSave={saveHandler} />);
});
//...
it('calls the save handler', () => {
expect(saveHandler).to.have.been.calledWith('New message');
});
});

handleSave = () => {
const { inputText } = this.state;
const { onSave } = this.props;
onSave(inputText);
this.setState({ inputText: '' });
}

render() {
return (
<div>
<NewMessageForm />
</div>
);
}
}

handleSave = (newMessage) => {
}
render() {
return (
<div>
<NewMessageForm onSave={this.handleSave} />
</div>
);
}
}

import NewMessageForm from './NewMessageForm';
state = { messages: [] };
handleSave = (newMessage) => {
this.setState(state => (
{ messages: [newMessage, ...state.messages] }
));
}
render() {

import MessageList from './MessageList';
//...
render() {
const { messages } = this.state;
return (
<div>
<NewMessageForm onSave={this.handleSave} />
<MessageList data={messages} />
</div>
);
}

const MessageList = ({ data }) => (
<ul>
{ data.map(message => (
<li key={message}>{message}</li>
)) }
</ul>
);

Outside-In TDD

Minimal,
Changeable
Code71 TDD in React with Cypress - @CodingItWrong - connect.tech 2018

Imagine…

Imagine…
…when you finish
building your feature
it's already fully
covered by tests.

Imagine…
…always having a
simple next step:
write a test. Or fix
the next test failure.

Imagine…
…delivering useful functionality
every few hours,
instead of working for days
on code that might not end up used.

learntdd.in/react76 TDD in React with Cypress - @CodingItWrong - connect.tech 2018

twitch.tv/codingitwrong

Thanks!
Resources: bit.ly/react-tdd
Tweet me at @CodingItWrong!

Test-Driven Development in React with Cypress

More Related Content

What's hot (20)

Similar to Test-Driven Development in React with Cypress (20)

More from Josh Justice (15)

Recently uploaded (20)

Test-Driven Development in React with Cypress