Fullstack React is a weekly newsletter about the React ecosystem with an emphasis on useful libraries, tutorials and code. Subscribe to read the best articles each week on React, Flux, GraphQL, Relay, and friends.

Subscribe with Email

Email

No spam, ever. We'll never share your email address and you can opt out at any time.

Building a comprehensive test suite for React applications

Testing is one of those things that's really important, but often not done enough or well. There are lots of libraries out there to help with testing React applications, but how do you know which solution is the best for your application? This week we've got a few libraries and tutorials that can help you decide what works for you and your application!

Learn how to set up continuous integration and continuous deployment with React and Heroku with a tutorial from Zac Kwan

Check out react-testing-library to test your application like a real user would

In addition to these testing tutorials and libraries, we've also included an article for newcomers to React (and JavaScript) to learn the differences between ES6 and React-specific code and a tutorial on how to style components with glamorous. Both are great resources for learning about the latest and greatest features of React.

Happy Coding!

-Sophia Shoemaker

Tutorials

This guide helps developers build a Continuous Integration and Continuous Deployment stack for their React app. You learn how to use CircleCI, CodeClimate, and Heroku with React. At the end of the tutorial, the React app will automatically deploy any changes on master to Heroku after all tests pass.

In this tutorial, we’ll see how to write tests for a React app using Jest and Puppeteer. Testing is an important part of modern web application development, it helps to check if the code you wrote is acceptable and works as accepted. It’s a way of catching bugs in your code before you go "live".

Because React and ES6 are very much intertwined, I have a hard time digesting any given block of code. What’s coming from React? What’s just ES6 JavaScript?

Knowing how to pick out what is just plain ol' JavaScript and what is React specific code is a key skill to learn before you get to far into the world of React development. Kevin Ball breaks down a lot of the syntax you'll see in React tutorials and examples and gives us simple explanations of how and where to use it.

💄 glamorous is a lightweight library for CSS-in-JS with a simple API that’s similar to styled-components and that makes use of glamor under the hood. Two of the main differences compared to styled-components is the use of JavaScript object literals and an additional API that allows to use DOM elements directly without creating additional named components. This tutorial walks us through how to use glamorous and give our components some style.

React Testing Library is a library with DOM testing utilities that encourage good testing practices. The react-testing-library is a light-weight solution for testing React components. It provides utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. It's primary guiding principle is:

The more your tests resemble the way your software is used, the more confidence they can give you.

So rather than dealing with instances of rendered react components, your tests will work by querying actual DOM nodes. You can find form elements by their label text, find links and buttons from their text (like a user would). It also exposes a recommended way to find elements by a data-testid as an "escape hatch" for elements where the text content and label do not make sense or is not practical.

About

Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.