Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Arrow up icon
GO TO TOP
Mastering React Test-Driven Development

You're reading from   Mastering React Test-Driven Development Build rock-solid, well-tested web apps with React, Redux and GraphQL

Arrow left icon
Product type Paperback
Published in May 2019
Publisher Packt
ISBN-13 9781789133417
Length 496 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Daniel Irvine Daniel Irvine
Author Profile Icon Daniel Irvine
Daniel Irvine
Arrow right icon
View More author details
Toc

Table of Contents (20) Chapters Close

Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
1. First Steps with Test-Driven Development FREE CHAPTER 2. Test-driving Data Input with React 3. Exploring Test Doubles 4. Creating a User Interface 5. Humanizing Forms 6. Filtering and Searching Data 7. Test-driving React Router 8. Test-driving Redux 9. Test-driving GraphQL 10. Building a Logo Interpreter 11. Adding Animation 12. Working with WebSockets 13. Writing Your First Acceptance Test 14. Adding Features Guided by Acceptance Tests 15. Understanding TDD in the Wider Testing Landscape

Refactoring your work

The next step of the TDD cycle is to refactor your work. This step is often the hardest, because our natural impulse can be to get straight into the next feature. Chasing green, as I like to call it: building more and more functionality is much more exciting. Refactoring, however, is much more zen.

The rule "more haste; less speed" applies to coding, just as in many other areas of life. If you skip the refactoring phase, your code quality will deteriorate. If you develop a habit of skipping refactoring, your code base will soon become difficult to work with.

It takes a lot of personal discipline to consistently refactor, but you will reap the rewards of a code base that remains maintainable as it ages.

Right now, we have some repeated code between our two tests. Let's fix that.

Test code needs as much care and attention as production code. The number one principle you'll be relying on when refactoring your tests is Don't Repeat Yourself (DRY). Drying up tests is a phrase all TDDers repeat often.

Promoting variables

Both of our tests use the same two variables: container and customer. We can pull up these declarations to the outer describe scope, but leave the definitions within the tests. Since we'll be splitting declaration and definition, that also means we'll need to use let instead of const:

Just above the first test, write the following two lines:

let container;
let customer;

Then, remove the word const from both of the tests, and re-run your tests, which should still be passing.

Using a beforeEach block

Both of our tests start with some setup or arrangement. When that setup is common to all tests, we can promote them into a beforeEach block instead. Code in this block is executed before each test.

Above your first test, write the following code, and delete the corresponding call to createElement from each of your two tests:

beforeEach(() => {
container = document.createElement('div');
});

Since we defined container in the scope of the describe block, the value set here in the beforeEach block will be available to our test once it executes.

Be careful when you use variables defined within the describe scope. These variables are not cleared between each test execution, so you are running the risk of non-independent tests. Therefore, any variable you declare in the describe scope should be assigned to a new value in a corresponding beforeEach block, or in the first part of each test, just as we've done here.

Extracting methods

The call to ReactDOM.render is the same in both methods. Since it's the same in both methods, it makes sense to pull it out.

However, rather than pull it out as-is, we can create a new function that takes the Appointment component as its parameter. This way, we can clearly see how our test data objects are woven through the object under test. If we hid that within an extracted method, the test would be less clear.

The parts of a test that you want to see are the parts that differ between tests. Usually, some data remains the same (container in this example) and some differs (customer in this example). Do your best to hide away whatever is the same and proudly display what differs.

Above the first test, write the following definition:

const render = component => ReactDOM.render(component, container);

Now, replace the call to ReactDOM.render in each test with this line:

render(<Appointment customer={customer} />);

Re-run your tests now—they should still be passing.

You have been reading a chapter from
Mastering React Test-Driven Development
Published in: May 2019
Publisher: Packt
ISBN-13: 9781789133417
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime
Visually different images