Test cases can be difficult to write when dealing with forms. I have found this especially difficult with my preferred UI library: Material UI. I love the components, design, and its seamless use with React, but when it comes to testing it can be difficult.

Below I’m going to show an example of an account delete request form I recently built and how I wrote my test cases.

I use jest + react-testing-library in my testing stack.

First, the form

The form itself was simple. A text field, checkbox, and submit button.

When the form loads the text field is empty and the…


Photo by Yancy Min on Unsplash

I’ve been using anti-corruption layers in my React + Redux apps for a while now. It’s a helpful design pattern when the asynchronous data you’re receiving is difficult to work with or needs some sanitation before you let it into your application state.

What is an Anti-Corruption-Layer?

An Anti-Corruption-Layer is a layer between different subsystems that don’t share the same semantics.

For me, these layers are functions that enhance or transform data just before it enters my global state, or just after it leaves.

I’ll be demonstrating some simple examples of how I have used anti-corruption-layers to make global state management a bit easier…


Before I became a web developer, I was a golf instructor.

My golf career spanned 5 years, took me up and down the east coast of the US and to Beijing China. It was fun for a while, but golf is best left a hobby for me.

After golf instruction, I wanted to become a web developer. Coding was always interesting to me so I gave it a shot. I’ve been a full stack developer for the past 4 years and the more code I write, the more I enjoy it.

After 5 years in the golf industry and 4…


Input fields that wait for a user to finish typing before performing an action are common feature in web applications. They can be tricky to get working so I wanted to show how I incorporated a wait timer into my input fields.

In my case, I needed a field that waits for users to finish typing in a few places. I already had an input component made with some custom styling, so I decided to extend the wait logic as a customizable feature.

For my example, Im using React, Typescript and Material UI.

Below is the complete example, I’ll step…


I wanted to share a design pattern I use to manage what certain users can or cannot see inside the React applications I build.

You might find this useful if your application needs to manage what users can see based on some setting in their account.

The example I’m going to show has several different components working together:

  1. React for the UI component library
  2. Typescript for type safety
  3. Redux for global state management
  4. Bitmask for users permissions

To start, let’s say you have a simple component with some text that you want to show or hide based on a users…


In my previous post, I showed a simple react hook that makes a specific api call. This time, I want to show how to turn that specific hook into a better, more reusable version.

Im going to use a very powerful feature of typescript called generics.

To start off, let’s see our first iteration of the api hook again.

This hook works okay, but if we wanted to make a similar api call to another endpoint, we would have to create another hook that would repeat most of what we have.

A more generic version of this hook could…


I recently started building my own hooks in react and I wanted to share one that found particularly useful.

Making api calls is something I do frequently, so one of the first hooks I set out to make was a simple hook that makes an api call, returns data, or an error message if something goes wrong.

Here is the full hook file, I’ll spend the rest of the article going through it pice by piece.

The first line of the hook is one of the most important

export default (): [(id: string) => void, User, string] =>

the…


Recently I’ve been working on upgrading the security of my web applications. One of the easiest security features to add is a robust Content-Security-Policy.

According to MDN:

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks.
Configuring Content Security Policy involves adding the Content-Security-Policy HTTP header to a web page and giving it values to control what resources the user agent is allowed to load for that page. For example, a page that uploads and displays images could allow images from…

Jesse Langford

Former golf instructor turned software engineer. 4 years ago I left my job teaching golf in Beijing to pursue my passion for writing code.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store