When testing React components, I often reach for Enzyme.js, a library of testing utilities for React components developed by the team at Airbnb. It’s become a standard tool among React developers. Recently, I was testing a component that used state to determine the className given to a child component. Here’s the general idea in code:

When the component’s has state.expanded === false, the hidden class is applied to the rows, hiding them with the style visibility: collapse. I wanted to test whether the rendered component was correctly applying my class naming logic, so I wrote up a test like this:

However, I found that my second test case was failing. After I made the call to wrapper.instance().toggleHidden(), I expected the class name to update according to my render function, which called this.setFormRowClass(). Instead, it seemed that the wrapper I was testing had not received the state update.

It took some perusal of the Enzyme docs to find update(), a method on shallow wrappers that allows you to force a re-render on the component. This turned out to be exactly what I needed. I modified the second test case like this:

Interactive forms

I was recently working on a form in React that looked something like this:

Shipping Address:
User Name
123 My Street
This Town, USA 45678

[ ] Use shipping address as billing address.

Billing Address:
User Name
456 Other Ave
That City, USA 56789

I wanted the form to have the following traits:

If the Use shipping address as billing address box is checked, copy over the data from the shipping address to the billing address

If there was previously data in the billing address and the user un-checks the box, bring back the old billing address

To accomplish these goals, I needed to implement some state management by using a class component and this.state. This is idiomatic React; once you understand how this.state works, you’d probably see this problem as trivial.

First approach

Here’s how you might instinctively use this.setState() in a class method on your component:

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

This makes things a bit tricky. The handleToggleUseShippingAsBilling() method in Version 1 first reads the current value of this.state in order to determine what should happen next. If that happens before React has completed a previous this.setState() call, then we will end up with an undesired program state. We need to know that we are starting from the version of state that directly precedes the new state. Fortunately, there is a usage pattern for this.setState() that does exactly that. This is pretty clearly described in the React docs, but I always find that a concrete example helps me remember how things work.

Two kinds of this.setState()

You can use this.setState() in two ways:

If you give it an object, it will overwrite this.state with that object’s properties. Let’s imagine we want to toggle a current state value called useShippingAsBilling. To use this form of this.setState(), we would read the value first, and then use this.setState to write the new value.

In our application amblr, my team and I are using geolocation data from the browser to place the user on a map. As of Chrome version 50, an encrypted connection is required for using location services, per this announcement:

Starting with Chrome 50, Chrome no longer supports obtaining the user’s location using the HTML5 Geolocation API from pages delivered by non-secure connections. This means that the page that’s making the Geolocation API call must be served from a secure context such as HTTPS.

To get HTTPS working in the browser, we used Let’s Encrypt, a new certificate authority that is ‘free, automated, and open.’ I took on the task of setting up the SSL certificates, with some help from a team member who has more command line chops than I do. I learned some useful things along the way.

How Web Servers Work

Servers have both an operating system and server software. Generally, the OS is some fork of Linux; Ubuntu is a popular example which is an option during setup if you use DigitalOcean for hosting. In addition to the OS, server software like Apache or Nginx allows you to serve files and perform routing and other tasks. Node takes the place of Apache/Nginx in simple setups. There may be some situations where you have both Apache/Nginx and Node running. For example, one way to set up SSL is to use Apache as a reverse proxy server that sits between the open Internet and your Node server. We tried this approach, but ran into roadblocks with the configuration file.

Instead, we chose to serve our site directly from Node, so we didn’t want Apache/Nginx to be running at the same time as Node.

Configuring up your Node server

There are a few ways to set up your Node server to use SSL; one of the most straightforward is to use the https module. You’ll need to do the usual routing and set up a static file server. Here’s a simplified server.js file using Express that shows how we set up https with an http server forwarding to it. This allows you to forward requests that come in on port 80 (the default port for http) to port 443 (the default port for https).

Note that you have created a regular HTTP server as a temporary way to set up Let’s Encrypt with the --webroot plugin. You’ll modify the server to switch to HTTPS once you’ve created the certificate files.

path-to-static-files is the directory where you serve static files from with your Node server. This will be important when using the webroot method to renew your certificates.

path-to-privkey is the location of your private key file. path-to-cert is the location of your certificate file. If you follow the directions above, they will be in the following locations – replace ‘node-https-example.com’ with your domain:

path-to-privkey:

/etc/letsencrypt/live/www.node-https-example.com/privkey.pem

path-to-cert:

/etc/letsencrypt/live/www.node-https-example.com/cert.pem

Configuring Let’s Encrypt

To configure Let’s Encrypt, I referenced this tutorial, but modified the steps to work with a Node-only setup. Instead of using --apache, I used --webroot to set up and renew the certificates. You’ll be installing the Let’s Encrypt Certbot, an automated command line tool that helps you get things configured.

If your Node server is not running already, start it: cd into the directory where your server file is, then do:

sudo node server.js

Using sudo is necessary because root privileges are required to expose ports below 1024. If you see an EACCESS error when you try to start Node on a server, it’s usually because you didn’t use sudo or because Node is already running.

In another terminal window, SSH into your server and update the package manager cache:

Run the configuration, inserting the folder where your site lives instead of node-https-example and your SSH user instead of user. The second flag for -d www.node-https-example.com is optional, but recommended for encrypting traffic at both the http:// and http://www domains.

Setting up automatic certificate renewal

To set up automatic certificate renewal, use the cron job as described below. It will try to update the certificate every Monday morning at 2:30 am. If the certificates are less than 30 days away from expiring, they will be renewed.:

SSH in to the server if you aren’t already logged in.

Edit the crontab file for the root user. If necessary, go ahead and create a new crontab for root:

sudo crontab -e

Add this line to the file to set up the cron job. It will save a log of the results to /var/log/le-renewal.log so you can check back later and see if the renewal is working. Replace user with your SSH user and node-https-example with the folder where your site lives.