Forem: Jamena McInteer

Mocking, Parallelism, and Streamlining: Optimizing React Tests

Jamena McInteer — Mon, 27 Jan 2025 17:50:18 +0000

Introduction

As developers, we understand the importance of a fast and reliable test suite. Slow tests can significantly hinder productivity, and redundant or inefficient testing practices can lead to slow, flaky tests and frustration. Recently, I embarked on a journey to optimize the test performance in a React app, and I’m excited to share the technical strategies and insights that made a measurable impact.

In this post, I’ll detail the changes I implemented, including converting tests into unit tests, restructuring components, adding parallelism in CircleCI, mocking heavy components, and removing redundant tests.

1. Converting to Unit Tests

One of the first steps was converting some integration or end-to-end (E2E) tests into unit tests. While E2E tests are crucial for validating the complete functionality, we rely on Cypress to run E2E tests when pull requests are merged. This eliminates the need to write E2E tests in React Testing Library (RTL). Since tests in RTL are run by CircleCI for every commit, speed is more important than full end-to-end coverage.

Why Unit Tests?

Unit tests focus on individual functions or components in isolation, offering several advantages:

Speed: Since they run in isolation without the overhead of rendering an entire application or navigating through pages, they execute much faster.
Debuggability: Failures are easier to pinpoint, as unit tests target specific pieces of functionality.

Example

Before optimization, a test for a dashboard screen validated multiple charts, tables, and tabs. I broke down this screen into smaller components like Chart, Table, and SearchBar, each with its own dedicated unit tests:

// Before: Testing the entire dashboard
render(<Dashboard />);
expect(screen.getByText("Chart Title")).toBeInTheDocument();

// After: Unit test for Chart component
render(<Chart data={mockData} />);
expect(screen.getByText("Chart Title")).toBeInTheDocument();

By testing components individually, I reduced the runtime and complexity of the test suite.

2. Component Restructuring for Isolated Tests

To enable better unit testing, I moved parts of complex screens into their own reusable components. This not only improved testability but also enhanced maintainability and readability of the codebase.

Example

A screen originally handled rendering bookmarks, search functionality, and large tables within tabs. After restructuring, these features were moved into separate components:

Bookmark
SearchBar
Tabs

Each component now has its own dedicated unit tests, reducing the reliance on broader integration tests.

// Unit test for SearchBar
render(<SearchBar onSearch={mockOnSearch} />);
fireEvent.change(screen.getByPlaceholderText("Search..."), {
  target: { value: "test" },
});
expect(mockOnSearch).toHaveBeenCalledWith("test");

3. Parallelism in CircleCI

Test suites can grow large, and running them sequentially becomes a bottleneck. To address this, I enabled parallelism in CircleCI, allowing tests to be distributed across multiple containers.

Implementation

In the .circleci/config.yml file, I:

Added parallelism: 8 to the test job.
Sharded the test suite using Vitest's --shard command and environment variables (CIRCLE_NODE_INDEX and CIRCLE_NODE_TOTAL).

jobs:
  test:
    docker:
      - image: cimg/node:lts
    parallelism: 8
    steps:
      - checkout
      - run:
          name: Run Tests
          command: |
            yarn test:ci --shard $((CIRCLE_NODE_INDEX + 1))/$CIRCLE_NODE_TOTAL

With this setup, the test suite was divided into smaller chunks, running simultaneously on different nodes. This change alone reduced test runtime by a significant amount.

4. Mocking Heavy Components

Some components, like charts or maps, are resource-intensive to render. While these components were crucial for the application, they weren’t always the focus of the tests.

Solution

I mocked these components in tests where they weren’t the subject of validation. For example, a Chart component was replaced with a simple mock:

import * as Chart from './components/charts'
vi.spyOn(Chart, 'default').mockImplementation(() => <div data-testId="mock-chart" />)

// Test
render(<Dashboard />);
expect(screen.getByTestId("mock-chart")).toBeInTheDocument();

This approach ensured that the test suite remained fast without compromising on coverage.

5. Removing Redundant Tests

Another optimization was identifying and removing redundancy in the test suite. Previously, the same functionality was tested:

At the route level (e.g., /dashboard tests all components on the page).
Individually in component-level unit tests.

Streamlining Tests

By trusting the unit tests for component behavior, I simplified route-level tests to focus on integration scenarios, reducing duplication.

Results

These optimizations led to significant improvements:

Test runtime: Test step (including installing npm packages and linting) was reduced by 50% in CircleCI after introducing these changes. The tests themselves made even bigger gains, going from on average 7 min to under 3 min.

Reliability: Fewer flaky tests, thanks to mocking and isolated unit tests.
Maintainability: Simplified codebase with reusable components and streamlined tests.

Conclusion

Optimizing test performance isn’t just about speed—it’s about creating a testing strategy that’s reliable, maintainable, and scalable. By converting to unit tests, restructuring components, leveraging parallelism, mocking heavy components, and eliminating redundancy, I was able to achieve a faster, more efficient test suite.

If you’re facing similar challenges, I encourage you to explore these techniques in your projects. Feel free to share your experiences or ask questions in the comments!

Painting a Picture with DALL·E

Jamena McInteer — Fri, 16 Dec 2022 17:27:01 +0000

The past few days I have been playing around with DALL·E and testing its capabilities, and seeing what I can do with it. DALL·E generates 1024x1024 images based on a text prompt, in the style described by the prompt. With the editing feature, it is possible to extend the picture and edit parts that aren't quite right. Using these features, I set out to create a couple of compositions.

Abstract Painting

I decided I would create an abstract painting with teal and orange colors as I love bright abstract art. I entered the following prompt:

“An abstract watercolor painting with splashes of teal and orange and highlights of glittery gold gouache paint”

I thought these were all amazing, but particularly liked the third one. I then overlapped a generation frame with part of the painting and used the same prompt to extend the painting.

I could have continued to make it larger and larger, and I may do so in the future. The AI seems to do especially well with abstract art, which makes sense as there are few rules when it comes to abstract art.

A photorealism oil painting of chickens

Next I wondered what it could do with something less abstract. I entered the following prompt:

“A rooster and hens, photorealism oil painting”

Except for the last one, I quite liked them. However, the middle hen in the first one had a weird head and the rooster had a kind of creepy hollow-looking eye. I decided to expand on the second one.

I couldn't reuse the same prompt, as I would have ended up with a lot of roosters. Instead I had to describe the section of the painting I wanted, while overlapping the generation frame with the existing painting so the style would carry and the edges would blend. I found that the further I got from the original image, the more the style drifted.

“One hen”

It also struggled a bit with sizing and perspective, depending on how much the existing painting was overlapped. On of my frames, with the following prompt, resulted in a large chicken that awkwardly dwarfed the existing chickens.

Some of the style drift was quite dramatic.

“Bush with some flowers and chicks”

“Hen and chicks”

A landscape country scene

Next I decided to create a country scene in the style of Martin Johnson Heade, an American landscape painting from the 1800s. I started with the following prompt:

“"A bright and surreal country scene with a red barn" by Martin Johnson Heade”

I thought this was a lovely start, and decided to expand on the first image. I started expanding using the same prompt, but then began editing. One of the expansions included a hint of someone sitting under the tree, so I decided to go with that and see how I could improve it.

I decided I wanted a little girl drawing under the tree, so I used the eraser tool to remove some of the elements in the scene that were under the tree, and then used a generation frame over the erased section and used a prompt for what I wanted to fill the area. I tried a few different prompts, but finally landed a generation from this prompt:

“"A little girl sitting and drawing in a notebook" by Martin Johnson Heade”

On the right side of the painting I wanted to add some horses. The AI seemed to struggle to paint good-looking horses, and sometimes they appeared in front of the fence.

“"Horses" by Martin Johnson Heade”

As in the previous painting, it also struggled with size and perspective.

I finally got a decent horse and decided to leave it as is.

“"A bright and surreal country scene with horses" by Martin Johnson Heade”

A weird, unrecognizable artifact was added on the left hand side next to the barn, so I used the eraser tool again and generated a windmill.

“"A bright and surreal country scene with a windmill" by Martin Johnson Heade”

I kept expanding the scene, using some of the following prompts to paint the sky:

“"A bright and surreal cloudy sky" by Martin Johnson Heade”

“"A bright and surreal sky" by Martin Johnson Heade”

“"A bright and surreal blue sky with small birds flying in the distance" by Martin Johnson Heade”

Again, the style started to drift the further I got from the original image. I tried to overlap about 75% of the generation frame with the existing image to minimize this.

The piece I ended up with was this:

There are small edits and improvements I would like to make to perfect it, but I thought it came out quite nicely.

Llamas!

For fun, I decided to generate some llamas in different styles to see what DALL·E would do with the same basic prompt but different style parts of the prompt.

“A photo of a llama wearing a teal and orange inca scarf and sunglasses”

“A llama wearing a teal and orange inca scarf and sunglasses, digital art”

“A llama wearing a teal and orange inca scarf and sunglasses, watercolor gouache”

“A llama wearing a teal and orange inca scarf and sunglasses, watercolor”

“A llama wearing a teal and orange inca scarf and sunglasses, photorealism oil painting”

“"A llama wearing a teal and orange inca scarf and sunglasses" by Rosa Bonheur”

I don't think the AI knows Rosa Bonheur, or maybe this is the wrong subject for that artist.

“"A llama wearing a teal and orange inca scarf and sunglasses" by Albrecht Dürer”

Same with Albrecht Dürer.

“"A llama wearing a teal and orange inca scarf and sunglasses" by Rembrandt”

I think the subject of the prompt makes a big difference on how closely the image matches the style of a particular artist.

“"A llama wearing a teal and orange inca scarf and sunglasses" by Johannes Vermeer”

Conclusion

Experimenting with DALL·E can be a highly enjoyable and creative experience. The tool's ability to quickly generate unique ideas allows for endless possibilities for exploration and inspiration.

However, working with DALL·E can also present challenges, such as quirks and weirdness to work through in order to produce something that looks good. Despite these challenges, the reward of successfully utilizing DALL·E to bring an idea to life can make the process well worth the effort. Playing with DALL·E can be a rewarding and enjoyable experience for anyone interested in exploring the capabilities of artificial intelligence and creativity. And now I've got to go buy some more credits! 😊

All the Hooks Series: useState

Jamena McInteer — Wed, 06 May 2020 22:17:14 +0000

In this first post of the series, I will be going over the useState React hook. useState is one of the more straightforward and widely used hooks, so it makes a good foundation to learn when using React hooks.

Getting Started with `useState`

useState is used for local state management in a React function component. To get started with the useState hook, you need a React function component and you need to import the useState hook from React.

// import useState hook
import React, { useState } from "react";

// create function component
const Example = () => {
  // ...
}

Now we can declare a state variable. When using the useState hook, we declare the state variable in this format: const [value, setValue] = useState(initialValue);, where value is the name of the state variable (we get to name our state variables), setValue is a function that is used throughout the component to update the value of the state variable, and initialValue is the initial value of the state variable, if any. Note that setValue should be written in this format, with lowercase set followed by the variable, all in camelCase.

Note: This format we are using with square brackets is called array destructuring, where useState returns an array with two items and we turn those items into their own variables.

If we want multiple state variables, we would follow this format multiple times, calling useState multiple times. For example:

import React, { useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);
  const [whatToCount, setWhatToCount] = useState();
}

When reading state, we use curly braces in our JSX or use the variable in our JavaScript like any other variable in scope.

import React, { useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);
  const [whatToCount, setWhatToCount] = useState("apples");

  return (
    <p>There are {count} {whatToCount}.</p>
  )
}

To update state, we use the updater function that was created, setCount (or setWhatToCount). This updater function may be called in a button event, for example, or from a function or other hook in our component.

import React, { useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);
  const [whatToCount, setWhatToCount] = useState();

  return (
    <>
      <button onClick={() => setCount(count + 1)}>+</button>
      <p>There are {count} {whatToCount}.</p>
    </>
  )
}

It's important to note that the updater function doesn't update the value right away. If you need to do something with the updated value right away, you will need to use a variable that you set to the new value before you set the state, or you will need to move the work you need to do with the new value to a useEffect hook that runs when that piece of state changes. I don't want to go too much into useEffect for this post, but I will touch on it briefly.

Let's take this example:

const Example = () => {
  const [count, setCount] = useState(0);

  const addCount = () => {
    setCount(count + 1);
    console.log('count', count); // 0
  }

  return (
    <button onClick={addCount}>+</button>
  )
}

In this example, the console will log 0 since it runs before setCount has completed. If we want to print the new count (1), we need to do the following:

const Example = () => {
  const [count, setCount] = useState(0);

  const addCount = () => {
    const newCount = count + 1;
    setCount(newCount);
    console.log('count', newCount); // 1
  }

  return (
    <button onClick={addCount}>+</button>
  )
}

Or use useEffect:

const Example = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('count', count); // 1, after count has changed
  }, [count]);

  const addCount = () => {
    setCount(count + 1);
  }

  return (
    <button onClick={addCount}>+</button>
  )
}

Using `useState` with functional updater form

The useState hook is pretty straightforward, but there are cases you will run into as you do more advanced work where using something like setCount(count + 1) is not going to work well, and you will need to use the functional updater form of the updater function. I will review this more when we get to useEffect and useCallback, as that's really when the need to use this will come up, but I wanted to mention it here as well. This also comes up when working with async functions.

In some cases, using something like setCount(count + 1) will cause infinite re-rendering of your React app, causing it to crash. If you're using this in useEffect, for example, every time count changes the app may re-render. If setCount is running every time count changes, and count changes every time setCount runs, then you will get an infinite looping issue.

This is where the functional updater form of setState comes in handy.

If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value.

So now, if we need to use the previous value of count when updating it, instead of using setCount(count + 1), we would use: setCount(prevCount => prevCount + 1). This way there is no dependency on count. Again, if you're not familiar with useEffect and useCallback yet, this will make more sense later in the series.

This functional updater form is also useful when performing async operations. Take the following for example:

const Example = () => {
  const [count, setCount] = useState(0);

  const handleClickAsync = () => {
    setTimeout(function delay() {
      setCount(count + 1);
    }, 3000);
  }

  return (
    <div>
      {count}
      <button onClick={handleClickAsync}>+</button>
    </div>
  );
}

In this example, because of the delay introduced with setTimeout, the value of count will be stale by the time setCount runs, giving us unexpected outcomes. What we want is to use the most recent value of count rather than the value that count was when setTimeout was queued. Using the functional updater form, we can change the example to this:

const Example = () => {
  const [count, setCount] = useState(0);

  const handleClickAsync = () => {
    setTimeout(function delay() {
      setCount(prevCount => prevCount + 1);
    }, 3000);
  }

  return (
    <div>
      {count}
      <button onClick={handleClickAsync}>+</button>
    </div>
  );
}

Working with objects as state values

useState can hold any kind of value, including arrays and objects. However, because of the way JavaScript handles arrays and objects (by value vs by reference), you may run into issues where you're trying to update an array or object state value and the component doesn't re-render and display the new state as expected. This becomes especially apparent when you're working with an array of objects.

The state updater doesn't merge new values with old values, it overwrites the state with the new value. React uses Object.is to decide if an object (or array of objects) is different and whether it should re-render. If you try to update an existing object, it is considered the same object, which means React won't re-render. You have to pass a brand new object to change the state.

There are a couple of ways you can update a state value that is an object and ensure that React recognizes the change and re-renders the component. One is to use Object.assign to create a new object and set the state to use this value. The other is to use the ES6 spread operator to create a new object with the values of the old object and any changes.

For example, the following won't trigger a re-render since the existing state object is being mutated and to React / JavaScript, it's the same object.

const Example = () => {
  const [item, setItem] = useState({id: 1, value: ''});

  const editItem = () => {
    item.value = Math.random() * 100;
    setItem(item);
  }

  return (
    <button onClick={editItem}>Change the number</button>
  )
}

To make this work, a new object must be created.

Using Object.assign to create a new object:

const Example = () => {
  const [item, setItem] = useState({id: 1, value: ''});

  const editItem = () => {
    const newItem = {
      id: prevValue.id,
      value: Math.random() * 100
    }
    const updatedItem = Object.assign({}, newItem);
    setItem(updatedItem);
  }

  return (
    <button onClick={editItem}>Change the number</button>
  )
}

Using the ES6 spread operator to create a new object:

const Example = () => {
  const [item, setItem] = useState({id: 1, value: ''});

  const editItem = () => {
    setItem({
      ...item,
      value: value: Math.random() * 100
    })
  }

  return (
    <button onClick={editItem}>Change the number</button>
  )
}

Working with arrays as state values

To add an item to a state variable that is an array, we want to create a new array and add the item, using the ES6 spread operator. We'll want to do something similar when changing existing items.

For example, don't try to push Array.push to add new items or directly modify the current array to change values in the array.

Instead, use the spread operator to create a new array using the value of the old array and add the items to the new array:

const Example = () => {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems([
      ...items,
      {
        id: items.length,
        value: Math.random() * 100
      }
    ]);
  }

  return (
    <button onClick={addItem}>Add a number</button>
  )
}

We can also do something like this if we want to change the value of an existing item in the array:

const Example = () => {
  const [items, setItems] = useState([]);

  const editItem = (id) => {
    setItems(prevValue => {
      const updatedItems = prevValue; // create a new array using the previous value
     // modify our new array 
     updatedItems.map((item) => {
        if (item.id === id) {
          item.value = Math.random() * 100;
        }
        return item;
      }
      return [...updatedItems]; // return our new array with modified values using the spread operator
    }
  }

  return (
    <button onClick={() => editItem(3)}>Change a number</button>
  )
}

Lazy initialization

From the React docs:

The initialState argument is the state used during the initial render. In subsequent renders, it is disregarded. If the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render

What does this mean? Normally, a value (which could be returned from a function) can be passed to useState to set the initial state of the state variable:

const [value, setValue] = useState(someFunction());

This initial state is used during the initial render but not in re-renders (rather whatever the state is set to using setValue, in this example). useState is called on every render, but the initial state value is disregarded after the initial render. someFunction() would still be called on subsequent renders, it's value is just going to be disregarded. If someFunction() is computationally expensive (maybe it deals with a large amount of data), having it called on re-renders would be bad for performance.

This is where we can use lazy initialization, so the function runs on the initial render only. We can do that by passing a function to useState that returns the result of the computationally expensive function. For example:

const [value, setValue] = useState(() => someFunction());

Updating state in an unmounted component (dealing with async updates)

Sometimes you'll be wanting to update your state after some async operation completes. However, if the component unmounts before the async operation is complete and the state update has had a chance to complete, you'll get a warning from React about updating state in an unmounted component.

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Again, this is more of a topic for the useEffect and useRef hooks, but I wanted to briefly mention it here. Assuming you have currently cancelled other async operations, like API calls and timers, you can use useRef to create a variable that will tell you if the component is mounted, and only update your state if it is. For example:

import React, { useState, useRef, useEffect } from "react";

const Example = () => {
  const _isMounted = useRef(true);
  const [apiRes, setApiRes] = useState();

  // Don't worry about this too much yet, but essentially _isMounted.current is set to `false` when this component unmounts
  useEffect(() => {
    return () => {
      _isMounted.current = false;
    }
  }

  // Again, don't worry about `useEffect` too much yet, but here we are performing some async operation and setting state after it's done. Using our `_isMounted` variable, we check if the component is mounted before we perform our state update.
  useEffect(() => {
    const someAsyncFunction = async () => {
      const res = await API.get("/api/some-api-endpoint");
      // Here is where we check that our component is still mounted before we make the state change
      if (_isMounted.current) {
        setApiRes(res.data);
      }
    }
  }, []);
}

Conclusion

That's it for this first post in the All the Hooks Series! Feel free to leave a comment if anything is confusing to you or if you find an error or want to start a conversation about any of the topics covered. We can all learn from each other! 🤗 Stay tuned for the next post in the series where I will be covering useEffect.

References

All the Hooks Series: Learn about the built-in React Hooks

Jamena McInteer — Tue, 28 Apr 2020 21:55:13 +0000

This series of posts will focus on getting familiar with the different React hooks you'll run across. React hooks are here since React 16.8, so getting familiar and comfortable with them is great for leveling up your React skills.

Note that I will focus on how to use hooks without referencing how things were done with classes. I personally started learning React shortly before hooks were released, and I found them so much simpler and more sensible that most of the tutorials trying to compare to classes just confused me more. So I wanted to start a series showing how to use these hooks without trying to make a comparison to the old way of doing things.

I will be covering the following React hooks, starting with the basics and then deep diving into more advanced topics around each of these hooks:

useState
useEffect
useCallback
useContext
useReducer
useLayoutEffect
useRef
useMemo

Follow me on DEV.to or on Twitter if you would like to know as soon as I publish a post in this series! 🔥

Painlessly Fix Common Git Mistakes

Jamena McInteer — Tue, 21 Apr 2020 17:51:47 +0000

When I first started using Git extensively, I was pretty much able to get away with knowing the basics:

git init: start a Git project
git clone [github-repo]: Clone a remote repository locally
git pull: Get the latest changes from the remote repository
git checkout -b [branch-name]: Create a new branch and switch to it
git checkout [branch-name]: Switch to a branch
git status: See what you have uncommitted, unstaged/staged, untracked
git add [some matcher string]: Stage files to commit
git commit: Commit your changes to the branch
git push origin [branch-name]: Push your changes to the remote repository
git merge [branch-name]: Merge another branch into your branch

However, the more I worked with Git the more I ended up making mistakes that I needed to fix (I'm only human after all 🤷‍♀️). Here are a couple of the tricks I've learned to fix these mistakes without panicking.

#1. Worked on the wrong branch and realized it before committing

This is a fairly easy one to fix and I usually catch this issue when running git status before committing my changes, and realizing that I am on the wrong branch. The fix for this is:

git add . - Stage all your changes. If you don't do this step, your new files may not make it into the stash in the next step.
git stash - This adds your uncommitted changes to your stash.
git checkout -b [another-branch] or git checkout [another-branch] - Create a new branch or switch to an existing branch.
git stash pop - Get your stashed changes out of your stash and into the correct branch.

#2. Worked on the wrong branch and committed a couple of times before realizing it, but didn't push to origin

Ok, sometimes I'm just a bit tired and don't realize I'm working on the wrong branch and I end up committing changes a couple of times without realizing it, but haven't pushed those commits to the remote repository yet. Here is how to fix this issue:

git add and then git commit or git stash to preserve any uncommitted changes you may still have.
git checkout -b [another-branch] or git checkout [another-branch] - Create a new branch or switch to an existing branch.
git merge [original-branch] - Merge the changes in the other branch where you DON'T want them to be.
(optional) git stash pop - Get the last set of changes that you stashed away into your new working branch if you used git stash in step 1.
git checkout [original-branch] - Switch to the original branch where you want to get rid of your changes.
git reset --hard origin/[original-branch] - Reset the branch to what is in the remote repository, blowing away all your changes 💥
git checkout [another-branch] - Checkout the branch that now has your changes and keep coding 👩‍💻

#3. Worked on the wrong branch, committed changes, and pushed them to origin

After changes are pushed to origin that shouldn't be there, it's a bit trickier to fix. Hopefully this doesn't happened on master or a staging branch as you can run into issues with other developers having problems or deployments being kicked off 😑

git log - A log of the different commits you've made will show up in the terminal. Go down (arrow down) to the earliest commit you want to fix and copy the ID for that commit. Now hit q to get out of this.
git rebase -i [target-commit] - Use the ID you copied in the previous step. Alternatively, you can do git rebase -i HEAD~2, replacing 2 with the number of latest commits you want to work with. A file should open in your editor displaying the different commits that have occurred on that branch, starting with your target commit. You can add # at the beginning of a commit's line, or replace pick with drop to delete the commit and the changes made by that commit. You can do this with several commits, as well as modify commits with the other commands displayed below the commits. When you're done, save and close the editor.
git rebase --continue - If needed, use this command until the rebase is completed.
git log - This is optional, but you can use this to review the completed rebase before you push to origin.
git push -f origin HEAD - Since the history has changed, you will need to force push to origin.

I hope this is useful! What Git mistakes have you made?

Snippets I Always Need to Look Up When Writing Tests with React Testing Library

Jamena McInteer — Wed, 15 Apr 2020 18:21:59 +0000

Whenever I start a new project and need to write React Testing Library (RTL) unit tests, I end up having to look up or copy snippets of code to set up the tests. I thought it might be useful to share some of these here in one place, both for myself and for others who might want to look up these snippets quickly. Feel free to leave a comment if any of these don't work for you or if there is a better way to do something. I will update this post as I gather more snippets over time.

Taking a snapshot

I normally don't use snapshots in my unit tests as they are more trouble than they're worth, but sometimes when debugging a unit test that is failing I want to see what the unit test is seeing, so I'll throw in a snapshot temporarily. I can never remember the exact code for taking a snapshot, and since I don't use them I can't refer to them in another part of the codebase. So here it is:

it("renders", () => {
  const { asFragment } = render(<MyComponent />);
  expect(asFragment()).toMatchSnapshot();
});

Mocking Axios API Calls

This is something I've had to learn how to do from several different sources as most articles will provide the basics using get for example, and skip over how to mock post requests. Or they will assume one call is being made instead of potentially many calls. Here's what I have figured out so far.

Setup

import axios from "axios";
...
jest.mock("axios");
const mockedAxios = axios as jest.Mocked<typeof axios>;

CancelToken

I use CancelToken to cancel axios API calls when components unmount. The above code is modified to the following to support CancelToken:

import axios from "axios";
...
jest.mock("axios");
const mockedAxios = axios as jest.Mocked<typeof axios>;
type Canceler = (message?: string) => void;

class CancelToken {
  public static source() {
    const cancel: Canceler = jest.fn();
    const token = new CancelToken();
    return {
      cancel,
      token
    };
  }
}

// @ts-ignore
mockedAxios.CancelToken = CancelToken;

Note that this works for me but does throw TypeScript errors as its not fully built out.

Get

it("renders", () => {
  const response1 = {
    data: [], // populate with mock data as desired
    status: 200
  }
  const response2 = {
    data: [], // populate with mock data as desired
    status: 200
  }
  mockedAxios.get.mockImplementation(url => {
    if (url === "/api/somePath") return Promise.resolve(response1);
    if (url === "/api/someOtherPath") return Promise.resolve(response2);
    // etc.
  });
  const { getByText } = render(<MyComponent />);
  ...
});

Post

it("renders", () => {
  const response1 = {
    data: [], // populate with mock data as desired
    status: 200
  }
  const response2 = {
    data: [], // populate with mock data as desired
    status: 200
  }
  mockedAxios.post.mockImplementation((url, payload) => {
    if (url === "/api/somePath" && payload.someProperty === "some value") {
      return Promise.resolve(response1);
    }
    if (url === "/api/somePath" && payload.someProperty === "some other value") {
      return Promise.resolve(response2);
    }
    // etc.
  });
  const { getByText } = render(<MyComponent />);
  ...
});

Render with Theme (Styled Components)

I will normally create a render-methods.tsx file and add the different render methods I need and import them into my tests. One of these is rendering with the Styled Components theme.

import React from "react";
import { render } from "@testing-library/react";
import { ThemeProvider } from "styled-components";

import theme from "../../theme"; // or wherever your theme file is

export function renderWithTheme(component: React.ReactNode) {
  return render(<ThemeProvider theme={theme}>{component}</ThemeProvider>);
}

Render with Router (Reach Router) and Mocking `navigate`

In my render-methods.tsx file, I have a renderWithRouter method that also incorporates rendering with a Styled Components theme. If you're not using Styled Components or a theme, this portion can be removed of course (see the second code snippet).

import React from "react";
import { render } from "@testing-library/react";
import { ThemeProvider } from "styled-components";
import {
  createHistory,
  createMemorySource,
  LocationProvider
} from "@reach/router";

import theme from "../../theme"; // or wherever your theme file is

export function renderWithRouter(
  component: React.ReactNode,
  { route = "/", history = createHistory(createMemorySource(route)) } = {}
) {
  return {
    ...render(
      <ThemeProvider theme={theme}>
        <LocationProvider history={history}>{component}</LocationProvider>
      </ThemeProvider>
    ),
    history
  };
}

Without theme:

import React from "react";
import { render } from "@testing-library/react";
import {
  createHistory,
  createMemorySource,
  LocationProvider
} from "@reach/router";

export function renderWithRouter(
  component: React.ReactNode,
  { route = "/", history = createHistory(createMemorySource(route)) } = {}
) {
  return {
    ...render(
      <LocationProvider history={history}>{component}</LocationProvider>
    ),
    history
  };
}

In my test file, I mock navigate so it works properly and can be tested.

import React from "react";
import { fireEvent, wait } from "@testing-library/react";
import { navigate } from "@reach/router";

jest.mock("@reach/router", () => {
  const RouterMocks = jest.requireActual("@reach/router");
  return {
    ...RouterMocks,
    navigate: jest.fn()
  };
});

it("navigates", () => {
  const { getByText } = render(<MyComponent />);
  fireEvent.click(getByText("Submit"));
  await wait(() => {
    expect(navigate).toHaveBeenCalledTimes(1);
    expect(navigate).toHaveBeenCalledWith("/pathOfNextPage");
  });
});

If you need to mock parameters in the route, you can add that to the jest mock as well:

jest.mock("@reach/router", () => {
  const RouterMocks = jest.requireActual("@reach/router");
  return {
    ...RouterMocks,
    navigate: jest.fn(),
    useParams: () => ({
      someParameter: 'some-parameter-value'
    })
  };
});

Dealing with Reach UI styles not found warning

If you're using Reach UI for components like Tooltip or Dialog, you may get a warning about styles not found. This is a work-around to get that warning to go away (this warning does not show up in the browser, just in unit tests).

const { getComputedStyle } = window;
beforeAll(() => {
  window.getComputedStyle = jest.fn().mockReturnValue({
    getPropertyValue: jest.fn().mockReturnValue("1")
  });
});
afterAll(() => {
  window.getComputedStyle = getComputedStyle;
});

Clicks with User Event

Since some components may use onMouseDown instead of onClick, using RTL's fireEvent to simulate clicks may not work. I use the user-event package instead which handles this case.

import userEvent from "@testing-library/user-event";
...
it("clicks", () => {
  const { getByText } = render(<MyComponent />);
  userEvent.click(getByText("Submit"));
});

Stubbing Date.now()

Sometimes you'll want to stub Date.now() to a fixed time when making time comparisons. There are a few different ways of doing this, but this is a simple method that I use in my tests.

it("stubs a date", () => {
  const realDateNow = Date.now.bind(global.Date);
  const dateNowStub = jest.fn(() => 1577838600);
  global.Date.now = dateNowStub;

  // Write the unit test as usual

  global.Date.now = realDateNow; // reset the global.Date.now when you are done

Handling TypeScript error regarding property 'value'

When using TypeScript with React Testing Library, I get the following error when trying to assert on an input field's value: Property 'value' does not exist on type 'HTMLElement'. This can be remedied by casting to HTMLInputElement. It's not particularly pretty having this all over your tests, but it works.

For example, this would throw the TypeScript error:

expect(getByLabelText("Name").value).toBe("Lilliana");

This can be updated to the following to fix the TypeScript error:

expect((getByLabelText("Name") as HTMLInputElement).value).toBe("Lilliana");

Setting up a development environment for Android development with React Native + Expo on Windows

Jamena McInteer — Tue, 18 Feb 2020 18:52:04 +0000

I recently needed to get a new React Native + Expo project up and running on my Windows machine and found that the documentation was a little scattered, especially in terms of setting up Watchman and Android Studio to run an Android emulator. I wanted to walk through my process to hopefully make life easier for other Windows users that run into this issue. Unfortunately, iOS development on Windows is not possible (boo!).

I would also like to take a moment to urge open source developers to give Windows a little love when possible. Not everyone is on a Mac, for personal preference or financial reasons, especially outside of the United States.

Please note that I am going to assume that you have Node 8.3 or newer installed. If you don't, I would recommend using an NVM alternative for Windows for better management of Node versions. Check out this article for help getting this set up (I use the first option covered in the article).

1. Install React Native CLI

Installing React Native CLI on Windows is the same as on macOS:

npm install -g react-native-cli

2. Install Expo CLI

Installing Expo CLI on Windows is the same as on macOS:

npm install -g expo-cli

3. Install Watchman

Watchman allows you to see changes in Expo when you make a code change in your React Native app without having start everything up again. In macOS, you can use Homebrew to install Watchman, but unfortunately on Windows it's not even available on chocolatey so it's a bit more involved than that. You will need to follow the instructions on this page to get the binary download, extract the ZIP file, and add the windows\bin directory to your PATH environment variable.

4. Install Python2

You will need to install Python2 if you don't already have it. If you have chocolatey on your Windows machine, you will need to open an administrator command prompt (right click Command Prompt and select "Run as Administrator", then run the following command:

choco install -y python2

5. Install JDK

You will need to install the latest JDK (Java Development Kit), found here, or with chocolatey, open an administrator command prompt as above and run:

choco install -y jdk8

6. Install Android SDK and Android Studio

The Android SDK comes bundled in Android Studio, the official IDE for native Android Development and what we will be using for running Android emulators. Android Studio can be downloaded here. Choose a "Custom" setup and ensure that the following components are checked:

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device

These components can be installed later if needed.

For React Native, you need the Android 9 (Pie) SDK installed. Refer to the React Native CLI Quickstart tab on the React Native Get Started docs under "Android development environment" for excellent instructions on installing the Android SDK, configuring the ANDROID_HOME environment variable, and adding the platform-tools to Path.

7. Preparing an Android Virtual Device (AVD)

On the Android Studio welcome screen, select "AVD Manager" or "Configure" and then "AVD Manager". This is where you will create new AVDs as well as manage and launch AVDs you have already created.

Per the React Native docs:

Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the Pie API Level 28 image.

Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.

8. Create and Run a React Native + Expo Project

You can create a React Native project with the following command in the directory you want it to be created in:

expo init projectname
cd projectname
npm run start

Then, select a to launch your app with Expo on your launched AVD.

Note that you can also launch the app on your phone by installing Expo on your phone and using the QR code that Expo should give you on your Windows machine.

Helpful Resources

Here are the resources I found useful when figuring this out for my own machine.

Conclusion

I hope this is helpful to Windows users out there who may be a little lost in setting up all the tools needed for React Native, Expo, and Android development on Windows. I know I was when I first started out, especially Android Studio as it is a beast of an IDE if you aren't familiar with it! Have fun building! 💖

Optional Chaining (?.), Nullish Coalescing (??), and Non-Null Assertion Operators (!) in TypeScript

Jamena McInteer — Fri, 14 Feb 2020 21:45:21 +0000

If you've worked with JavaScript you've probably become all to familiar with the following error: TypeError: Cannot read property 'value' of undefined where value is a property on an object that you are trying to access. For example, if you are expecting to receive an object from an API, you might have something in your code like this:

const cat = response.data.animals.cat;

But if the API didn't return any animal object, then this code would throw the error TypeError: Cannot read property 'cat' of undefined. It's even possible that your response object doesn't even have the data object, and you end up with an error like TypeError: Cannot read property 'animals' of undefined.

To avoid these errors, we usually write something like this:

let cat;
if (response.data && response.data.animals) {
  cat = response.data.animals.cat;
}

But now, not only is this code more verbose, cat is no longer a constant (since using const cat within the if statement would make it unusable outside of the if statement).

You might also try using ternary operators to make your code a bit less verbose and keep the const, like this:

const cat = response.data && response.data.animals ? response.data.animals.cat : undefined;

Optional Chaining Operator

This is where optional chaining (the Optional Chaining operator) comes in for JavaScript (currently in stage 4 and has recently arrived in Chrome) and TypeScript (since version 3.7, November 6, 2019). Now we can achieve what the previous two snippets of code did with less verbosity:

const cat = response.data?.animals?.cat;

In this case, cat will be undefined if response.data is undefined or if response.data.animals is undefined, instead of throwing an error. This looks a lot more like the first snippet of code we attempted to use.

To further understand how this works, here is what the TC39 proposal states:

If the operand at the left-hand side of the ?. operator evaluates to undefined or null, the expression evaluates to undefined. Otherwise, the targeted property access, method or function call is triggered normally.

Nullish Coalescing Operator

What if we don't want cat to be undefined if response.data or response.data.animals is undefined? Let's say we want cat to be a string, "No cat could be found.".

Normally, we might do something like this:

let cat;
if (response.data && response.data.animals) {
  cat = response.data.animals.cat;
}
else {
  cat = "No cat could be found.";
}

Or, using the ternary operator:

const cat = response.data && response.data.animals ? response.data.animals.cat : "No cat could be found.";

There is another operator, also in stage 4 for JavaScript and currently available in TypeScript, called the Nullish coalescing operator that can be used together with optional chaining to make our lives a little easier:

const cat = response.data?.animals?.cat ?? "No cat could be found.";

If you are not used to this syntax it may take a little getting used to, but should help make your code less verbose.

Again, a snippet from the TC39 proposal that may help understand how this operator works:

If the expression as the left-hand side of the ?? operator evaluates to undefined or null, its right-hand side is returned.

This operator is also useful when working with falsy values that are not null or undefined. For example, the following will print Hello since the string is empty and therefore falsy, even if it is not null or undefined:

const someEmptyValue = '';
console.log(someEmptyValue || 'Hello');

The same is true for the following, since 0 is also falsy:

const someZeroValue = 0;
console.log(someZeroValue || 'Hello');

And for the following, since false is also falsy:

const someFalseValue = false;
console.log(someFalseValue || 'Hello');

The results of these examples may be what we intend, depending on the application, but there are cases where we only want them to be falsy if they are null or undefined (called nullary values) and not the other cases.

For example, the following will print an empty string, 0, and false respectively, and not "Hello":

const someEmptyValue = '';
console.log(someEmptyValue ?? 'Hello');

const someZeroValue = 0;
console.log(someZeroValue ?? 'Hello');

const someFalseValue = false;
console.log(someFalseValue ?? 'Hello');

This nullish coalescing operator can be super useful if you're not sure if an optional argument for a function is being passed and you want to use different logic depending on whether or not it is. Consider this TypeScript snippet:

let inputValue: string = 'Jane Doe';
const validateInput = (value?: string | undefined) => {
  const checkValue: string = value ?? inputValue;
  if(!checkValue) {// will check for an empty string in this case
    return false;
  }
  return true;
}

With this snippet, we could pass a value to the function, for example validateInput(someNewValue) and the validation will occur on the value passed. However, if no value is passed as in validateInput() then the validation will occur on inputValue (this may be a state variable that is updated when the input is changed, for example).

Non-Null Assertion Operator

There may be times when you are writing TypeScript that you put in checks to ensure that a variable is not going to be null or undefined later in the code, but the compiler throws an Object is possibly 'null' or Object is possibly 'undefined' error, or something like undefined is not assignable to number. For example:

const addNumbers = (a: number | undefined, b: number) => {
  const c: number = a;// throws an error
  const d: number = b;
  return c + d;
}

Normally, this is a good thing, but imagine we had a scenario where we know that a and b are numbers whenever this function is called, even though they could be undefined at some other point in the program. Maybe you have some state in a React app that is initially undefined, but at the point that a function like this is called they are always already set. You can use the non-null assertion operator for these cases. This works if you have the --strickNullChecks flag turned on and are writing TypeScript (not JavaScript).

const addNumbers = (a: number | undefined, b: number) => {
  const c: number = a!;// no error
  const d: number = b;
  return c + d;
}

Be careful when using this operator though! If a turns out to be undefined anyway, no error will be thrown for c and c will end up undefined even though it should not have that type. Essentially, the code will fall back to JavaScript instead of using the type checks that TypeScript provides. This is a type annotation that does not change the compiled code. It is usually better to use null checks when you can (like using the previous two operators). You can read more about this operator in this article: Cleaner TypeScript With the Non-Null Assertion Operator.

Conclusion

I hope this article is useful for anyone learning TypeScript who hasn't learned about these operators yet. Feel free to leave a comment if you need clarification or if you find a typo or inaccuracy. 💕

A Collection of TypeScript Guides and Cheatsheets

Jamena McInteer — Tue, 11 Feb 2020 23:35:53 +0000

If you're just getting started with TypeScript, you may be wondering where to start your learning and what helpful cheatsheets may be out there. Being new to TypeScript myself, I thought I would share a brief history of my journey learning TypeScript and what resources I have found helpful.

Getting Into TypeScript for the First Time

I had heard a lot about TypeScript and had it on my study roadmap for early to mid 2020. However, I began interviewing with an opportunity here in Austin late last year that gave me a code test, and, knowing that they use TypeScript in their projects, I figured it would be a good idea to use TypeScript in this React project.

The first article I read was Robert Cooper's Get Started with TypeScript in 2019. This article covers a little bit of setup, but doesn't delve into it too deeply, which I liked. I was using Create React App which makes it easy to plug in TypeScript, so I didn't need a lot of help in setting up. What I needed help on was TypeScript itself. This article did a good job of breaking down the basics of TypeScript, and listing the most common types and annotations I needed to know. This article also lists three other resources at the end that are very helpful.

I first built the app in JavaScript as I was initially more concerned about getting an MVP done with all the features I wanted it to have. Then I switched the app over to TypeScript. As expected, I immediately had a lot of issues to fix. I went through and fixed the TypeScript issues, Googling where the article didn't cover something. I used VSCode that has really nice integration with TypeScript which also helped me to understand TypeScript better. What really helped convince me that TypeScript was a good thing was when I was able to catch some bugs I had in my code that I didn't even know I had (they would only have shown up in edge cases).

This project helped me land the job and I have been working in TypeScript at my new job since mid-January 2020. I am certainly no expert yet, but am learning more and becoming more comfortable with it every day! ✨

More Resources

And now, a list of resources for your own learning!

Guides

Cheatsheets

Books

I haven't read this one yet but was it was recommended by a co-worker and is on my reading list: Programming TypeScript: Making Your JavaScript Applications Scale

Conclusion

I hope this helps someone getting started with TypeScript. If you know of any great resources for TypeScript beginners, please leave a comment!

Forem: Jamena McInteer

Mocking, Parallelism, and Streamlining: Optimizing React Tests

1. Converting to Unit Tests

Why Unit Tests?

Example

2. Component Restructuring for Isolated Tests

Example

3. Parallelism in CircleCI

Implementation

4. Mocking Heavy Components

Solution

5. Removing Redundant Tests

Streamlining Tests

Results

Conclusion

Painting a Picture with DALL·E

Abstract Painting

A photorealism oil painting of chickens

A landscape country scene

Llamas!

Conclusion

All the Hooks Series: useState

Getting Started with useState

Using useState with functional updater form

Working with objects as state values

Working with arrays as state values

Lazy initialization

Updating state in an unmounted component (dealing with async updates)

Conclusion

References

All the Hooks Series: Learn about the built-in React Hooks

Painlessly Fix Common Git Mistakes

#1. Worked on the wrong branch and realized it before committing

#2. Worked on the wrong branch and committed a couple of times before realizing it, but didn't push to origin

#3. Worked on the wrong branch, committed changes, and pushed them to origin

Snippets I Always Need to Look Up When Writing Tests with React Testing Library

Taking a snapshot

Mocking Axios API Calls

Setup

CancelToken

Get

Post

Render with Theme (Styled Components)

Render with Router (Reach Router) and Mocking navigate

Dealing with Reach UI styles not found warning

Clicks with User Event

Stubbing Date.now()

Handling TypeScript error regarding property 'value'

Setting up a development environment for Android development with React Native + Expo on Windows

1. Install React Native CLI

2. Install Expo CLI

3. Install Watchman

4. Install Python2

5. Install JDK

6. Install Android SDK and Android Studio

7. Preparing an Android Virtual Device (AVD)

8. Create and Run a React Native + Expo Project

Helpful Resources

Conclusion

Optional Chaining (?.), Nullish Coalescing (??), and Non-Null Assertion Operators (!) in TypeScript

Optional Chaining Operator

Nullish Coalescing Operator

Non-Null Assertion Operator

Conclusion

A Collection of TypeScript Guides and Cheatsheets

Getting Into TypeScript for the First Time

More Resources

Guides

Cheatsheets

Books

Conclusion

Getting Started with `useState`

Using `useState` with functional updater form

Render with Router (Reach Router) and Mocking `navigate`