DEV Community: Robin van der Vleuten

Use previous value through a React hook

Robin van der Vleuten — Thu, 13 Jan 2022 20:05:33 +0000

React Hooks were definitely a game changer when they got introduced in React v16.8.0. It took me some time to familiarize myself with their usage. But now that I have used them a lot, I can see how using them make React components easier to reason about and maintain.
By creating custom hooks that you reuse within components, you can break up complex logic to smaller understandable functions.

After developing many applications, I have gathered a library of React hook patterns used in almost any of these projects.

One of them is retrieving the previous value of the state for example. Written within a handful lines of code, it makes clever use of the useRef() hook. As I found out that not only you can use this hook to store the reference to a HTML element, but that it stores any value you pass it.
When combined with the useEffect() hook, you can create a small helper to store and retrieve the previous value of the variable you passed to it.

Let me show you the usePrevious() hook.

import React from 'react';

export default function usePrevious<T>(value: T): T {
  // Create a reference to hold the previous version of the value,
  // as it is basically a generic object whose `current` property can hold any value.
  const ref = React.useRef<T>();

  // Use the `useEffect` hook to run a callback...
  React.useEffect(() => {
    // ...to store the passed value on the ref's current property...
    ref.current = value;
  }, [value]); // ...whenever the value changes.

  // And return the currently stored value,
  // as this will run before the `useEffect` callback runs.
  return ref.current;
}

What to do with this hook?

When you combine the usePrevious hook with useState, you can run a callback whenever a value differs from the previous render cycle. I mainly use it in applications to compare boolean variables to their previous values, like the following.

import React from 'react';

const Application = () => {
  // Call some external API through a custom hook.
  const { data, loading } = useAsyncApi()
  // Pass its loading indicator to our created hook.
  const wasLoading = usePrevious<boolean>(loading);

  // Use the `useEffect` hook to run a callback...
  React.useEffect(() => {
    // ...to check if the API was loading but now it is completed...
    if (!loading && wasLoading) {
        // ...and run some arbitary code...
    }
  }, [loading, wasLoading]); // ...whenever one of these changes.

  return (
    <div>
      {/* ... */}
    </div>
  );
}

How will you use this hook in your applications? Let me know, as I am curious to find out any other use case you can come up with!

How to use Vim on Linux and macOS

Robin van der Vleuten — Mon, 07 Dec 2020 12:59:02 +0000

If you ever did try to edit files on Linux through the terminal, you'll probably have run into Vim. It is a text-based editor pre-installed on macOS and most Linux distributions.

Very handy, but a bit difficult to grasp for first-time users. Especially when you have opened up a file in the Vim editor by accident. It all bit us developers at least once in our career. As it's apparently one of the most sought-after answers on StackOverflow.

So I've summarized a couple of basic commands that will help you open a file, do some changes and then exit Vim.

How to open a file

First, you need to open a file that you would like to edit. You can use either vim or vi with the name of the file you would like to open. If the file does not exists in the current directory, it will be created for you.

vi file-to-open.txt

How to edit a file

When you have opened up a file, you get into normal (or master) mode. You will be able to read the contents, but you can't make any changes yet. From there, you can execute commands or switch to insert mode. Within this mode, all your keystrokes will result in changes to the text. To go back to the normal mode, you need to press the <ESC> key.

All other Vim commands start with a : character followed by a keyword, which you can only enter when you are in normal mode.

A good overview is provided by the following reference diagram.

Source: https://github.com/nilp0inter/Vim-for-Muggles

How to exit Vim

When you are done making changes, you need to make sure that you are in normal mode by pressing the <ESC> key. And then use the :q command (or one of its siblings) to exit the editor.

:q - just quit when you don't have any changes
:q! - quit and discard any changes you've made
:wq - quit and save all changes to the file

How to capitalize strings in JavaScript

Robin van der Vleuten — Fri, 13 Nov 2020 09:36:35 +0000

To capitalize a string in Javascript so the first character is in uppercase, we don't need to add another NPM dependency. We can use plain JavaScript or even CSS if it is solely for presentational purposes.

TLDR;

const chars = 'hello'
chars[0].toUpperCase() + chars.slice(1) // 'Hello'

Walk through all steps

Let's see how we can approach this through a couple of common JavaScript functions. First, you have to keep in mind that strings are characters. So another way to write a string, is to create an array of characters that we join together.

const chars = ['h', 'e', 'l', 'l', 'o'].join('') // 'hello'

Uppercase the first letter

You can access any character within this array through its index. So if we need the letter e from this array, we can use square brackets to access it at index 1 (as arrays always start counting their index at 0).

But since the introduction of ECMAScript 5, we can treat strings as an array-like object. And thus access any character from a string in a similar fashion.

// We get the first letter by accessing the character at index zero.
const chars = ['h', 'e', 'l', 'l', 'o']
chars[0] // 'h'

// We get the first letter by using the `charAt()` method with index zero.
const chars = 'hello'
chars[0] // 'h'

Now we have the first letter isolated from the rest of the string, we can utilize the String.prototype.toUpperCase() method to convert it to uppercase. This method does not convert the string itself, but returns a new string with all of its characters in uppercase. You can read more about the method at the MDN docs.

const chars = 'hello'
chars[0].toUpperCase() // 'H'

Slice the rest of the letters

Next we need to get the rest of string after the first character. As we gonna uppercase the first character and append the rest as is. To get a portion or a slice of an array, we can use the Array.prototype.slice method. This method gives us a slice between a start and end index. Read more about it at the MDN docs.

We already know that we do not want the first character (at index 0), so our slice starts at 1. Our word has 5 characters and as an array starts at 0, our slice ends at 4.

const chars = ['h', 'e', 'l', 'l', 'o']
chars.slice(1, 4) // ['e', 'l', 'l', 'o']

But this will not work if we do not know our string length upfront. So let's use the Array.prototype.length property to pass the length of our string to the slice method.

const chars = ['h', 'e', 'l', 'l', 'o']
chars.slice(1, chars.length) // ['e', 'l', 'l', 'o']

And as it is common to slice arrays till the end, we can even skip passing the length.

const chars = ['h', 'e', 'l', 'l', 'o']
chars.slice(1) // ['e', 'l', 'l', 'o']

Now to slice a string, we can use String.prototype.slice. Which is identical to the array's slice method. You can read more about it in the MDN docs as well.

const chars = 'hello'
chars.slice(1) // 'ello'

So let's now combine both the first uppercase character and the rest of the string.

const chars = 'hello'
chars.charAt(0).toUpperCase() + chars.slice(1) // 'Hello'

And that will gives us a capitalized string in JavaScript.

Just use CSS

Please remember though, that if its just for displaying a capitalized text on a web page, you can just use a CSS selector.

<style>
    .capitalize {
        text-transform: capitalize;
    }
</style>

<span class="capitalize">hello</span>

How to use React context

Robin van der Vleuten — Fri, 23 Oct 2020 12:47:26 +0000

React Context is a powerful feature introduced in React v16.3.0. It allows you to access values from the current context (e.g. the parent) inside your components' render methods, where you normally would be limited to accessing only its local state and props . This creates a very flexible system for sharing values between components. In this article, we'll cover how to use React Context to create a shared state, and how to consume that state in a child component.

This article assumes you are familiar with the basics of React, such as JSX, components, state, and props . If you're not familiar with these concepts yet, I would recommend reading the official React docs first.

What is React Context?

React Context is a new feature that allows you to share data between components. It's similar in concept to React's useState() hook, but it allows you to share data across multiple components at once. The most common use case for using the context API is sharing state across one or more child components. Let's look at an example:

import React from 'react'

const ParentComponent = () => {
    const [counter, setCounter] = React.useState(0)

    return (
        <ChildComponent
            counter={counter}
            onIncrement={() => setCounter(counter + 1)}
        />
    )
}

const ChildComponent = ({ counter, onIncrement }) => {
    return (
        <div>
            {counter}
            <button onClick={onIncrement}>increment</button>
        </div>
    )
}

Here, we have a <ParentComponent> that sets its own local state with an initial value of 0. The component is rendering a <ChildComponent />, which is receiving the current counter state as prop. It also updates the parent's counter state when the increment button is clicked.

This works great for simple cases, but it can quickly get out of hand if we want to share more state between components. Components start to become more and more coupled, which makes them harder to maintain and reason about. We can do better than this!

Instead of passing the counter prop into ChildComponent, we can use the React Context API to share the counter state between both components. Here's how:

import React from 'react'

const CounterContext = React.createContext(0)

const ParentComponent = () => {
    const [counter, setCounter] = React.useState(0)

    const increment = () => setCounter(counter + 1)

    return (
        <CounterContext.Provider value={{ counter, increment }}>
            <ChildComponent />
        </CounterContext.Provider>
    )
}

const ChildComponent = () => {
    const { counter, increment } = React.useContext(CounterContext)

    return (
        <div>
            {counter}
            <button onClick={() => increment()}>increment</button>
        </div>
    )
}

The ChildComponent is now consuming the counter state and increment action from the context instead of receiving them as props . This allows us to avoid coupling ChildComponent to ParentComponent.

How is this different from `useState()`?

The biggest difference between the context API and useState() is that the context API allows you to share state between multiple components at once. The useState() hook is scoped to a single component only.

Another difference is that the context API can be used to share any type of data, not just state. Like functions for example. We can even use context to share an entire Redux store (but don't do that please).

How does the context API work?

The Context object is a special type of React object that can be used to create and share data. It has two component: Provider and Consumer. The provider is used to create new context objects, while the consumer is used to access values from those contexts.

The context API allows you to provide multiple consumers with a single provider. For example:

import React from 'react'

const CounterContext = React.createContext(0)

const ParentComponent = () => {
    const [counter, setCounter] = React.useState(0)

    const increment = () => setCounter(counter + 1)

    return (
        <CounterContext.Provider value={{ counter, increment }}>
            <DisplayCounterComponent />
            <IncrementCounterComponent />
        </CounterContext.Provider>
    )
}

const DisplayCounterComponent = () => {
    const { increment } = React.useContext(CounterContext)

    return <div>{counter}</div>
}

const IncrementCounterComponent = () => {
    const { increment } = React.useContext(CounterContext)

    return (
        <div>
            <button onClick={() => increment()}>increment</button>
        </div>
    )
}

Here, we are using the CounterContext provider to share the context between multiple components. The DisplayCounterComponent is retrieving the counter state and displays it value, while IncrementCounterComponent is retrieving the increment action from the context instead.

Create a custom context provider

In the previous examples, we were using the CounterContext.Provider directly. But we can create our own CounterProvider component that will make it easier to reuse the context logic.

import React from 'react'

const CounterContext = React.createContext(0)

const CounterProvider = ({ children, initialCount = 0 }) => {
    const [counter, setCounter] = React.useState(initialCount)

    const increment = () => setCounter(counter + 1)

    return (
        <CounterContext.Provider value={{ counter, increment }}>
            {children}
        </CounterContext.Provider>
    )
}

The CounterProvider component receives an initial count from the parent, which it uses to create the context's initial state. It also receives a children prop, which we are passing through so any child component will be rendered.

Now let's see how we can use CounterProvider in our app.

import React from 'react'

const ParentComponent = () => {
    return (
        <CounterProvider initialCount={0}>
            <ChildComponent />
        </CounterProvider>
    )
}

const ChildComponent = () => {
    const { counter, increment } = React.useContext(CounterContext)

    return (
        <div>
            {counter}
            <button onClick={() => increment()}>increment</button>
        </div>
    )
}

The useContext hook is still used to retrieve our counter context within any child component. But we can create a custom useCounterContext hook for this for better reusability.

const useCounterContext = () => React.useContext(CounterContext)

Now we can use useCounterContext instead of useContext inside our components.

const ChildComponent = () => {
    const { counter, increment } = useCounterContext()

    return (
        <div>
            {counter}
            <button onClick={() => increment()}>increment</button>
        </div>
    )
}

Closing thoughts

The context API is a powerful tool for creating shared state between multiple components. It's a great way of avoiding coupling and your components together, which makes them easier to test and maintain.

The React docs have a great article on the context API as well. It's worth taking a look at if you are interested in learning more.

Trap focus in a React component

Robin van der Vleuten — Mon, 12 Oct 2020 14:39:42 +0000

Some actions on a web application requires shifting the focus of an user. We'll use the focus-trap package to trap focus within a DOM node or React component.

While developing interactive applications for the modern web, changes are that you'll need to create overlaying elements. When such elements are active, the rest of the page is usually visually hidden and the user is only allowed to interact with this element. We can use ARIA-attributes to help with assistive technologies, but that won't prevent keyboard users from tabbing out of the active element.

For example, setting aria-modal="true" on an active modal will tell assistive technologies that the elements below the current dialog are not available to interact with¹. This, however, will not prevent the user from tabbing out of your modal component. In this case we’ll have to resort to JavaScript and trap the keyboard focus, and keep the tabbed element in our modal overlay.

Trap focus with vanilla JavaScript

Trapping focus and staying accessible is quite complex and fragile functionality². So we're going to use the well written focus-trap to help implementing an accessible modal component.

Let's say that we have the following HTML markup containing the modal.

<div id="demo">
    <button id="show">show modal</button>

    <div id="modal">
        Modal with <a href="#">with</a> <a href="#">some</a>
        <a href="#">focusable</a> elements.

        <button id="hide">hide modal</button>
    </div>
</div>

With a script attached to the HTML page, we can trap the focus when the modal is shown.

import { createFocusTrap } from 'focus-trap'

const modal = document.getElementById('modal')

const focusTrap = createFocusTrap('#modal', {
    onActivate: function () {
        modal.className = 'trap is-visible'
    },
    onDeactivate: function () {
        modal.className = 'trap'
    },
})

document.getElementById('show').addEventListener('click', function () {
    focusTrap.activate()
})

document.getElementById('hide').addEventListener('click', function () {
    focusTrap.deactivate()
})

The focus-trap package provides many more options. Like deactivating when clicking outside of the component or trigger deactivating when the ESC key is pressed.

Trap focus with React

To achieve the focus trap with React, we can use the focus-trap-react package. It is a thin wrapper around the original package.

Let's convert our vanilla JavaScript example to a React component.

import React from 'react'
import ReactDOM from 'react-dom'
import FocusTrap from 'focus-trap-react'

const Demo = () => {
    const [showModal, setShowModal] = React.useState(false)

    return (
        <div>
            <button onClick={() => setShowModal(true)}>show modal</button>

            <FocusTrap active={showModal}>
                <div id="modal">
                    Modal with <a href="#">with</a> <a href="#">some</a>{' '}
                    <a href="#">focusable</a> elements.
                    <button onClick={() => setShowModal(false)}>
                        hide modal
                    </button>
                </div>
            </FocusTrap>
        </div>
    )
}

ReactDOM.render(<Demo />, document.getElementById('demo'))

You'll notice that we've wrapped the modal with an <FocusTrap /> component. Whenever the trap is active - as indicated by the showModal state - only the children within the trap will get focus.

Closing thoughts

It is quite complex to develop a modal or a dialog component that is accessible to any of your users. Especially when they are visually impaired and depend on the keyboard to navigate through your application. By adding the focus-trap package to your toolbelt, it becomes much easier to create keyboard-navigable components without leaving users behind.

Scroll a React component into view

Robin van der Vleuten — Sat, 04 Jul 2020 10:32:12 +0000

React has an easy way to access DOM APIs of HTML elements through references. We learn how React exposes HTML elements by scrolling an element into view on the click of a button.

People's behavior on websites did not change very much since the early days of the internet. But one thing that did change - since 1994 to be more precise - was that we learned to scroll longer pages of content. We are now used to websites where not all information may be visible at first sight.

But how do we grab a user's attention for something that isn't visible in the current part of the viewport it's currently looking at. We can utilize a very handy browser API for that, called Element.scrollIntoView(). Which does exactly what it says it does with a few nice options to modify its behavior.

Scroll to element with plain HTML

Before diving into the React implementation, let's try out the API on a simple HTML list with vanilla Javascript.

Let's say we have an article with a long text.

<article>
    <h1 id="title">
        An interesting article for Latin readers
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet luctus neque. Etiam eu quam lacinia, placerat sem ut, interdum risus. Quisque ut feugiat mauris. Aenean euismod fermentum facilisis. Donec ultricies maximus elit, sit amet convallis urna rhoncus vitae. Aliquam bibendum turpis et felis blandit commodo. Donec egestas neque non elit laoreet, faucibus tempor ante gravida.
    </p>
    <p>
        Duis in ante turpis. Phasellus dignissim tellus et nunc lacinia elementum. Sed venenatis tincidunt justo. Praesent sed purus facilisis, porttitor ligula in, mattis velit. Curabitur non pellentesque nunc. Duis elit urna, bibendum et purus nec, maximus imperdiet mauris. Cras euismod, leo id vehicula vulputate, nibh massa tincidunt justo, sit amet fringilla quam orci pellentesque enim.
    </p>
    <p>
        ...
    </p>
</article>

Whenever a user reached the end of the article, we would like to provide a button to scroll back to the top of the article. This can be achieved by adding a link with the id of the <h1> heading element on the end of the paragraph.

<article>
    ...
    <a href="#title">
        Back to the top
    </a>
</article>

Now when the user clicks the link, the browser will automatically jump back to the title element and the user is back on the top of the article. This is the basic way to scroll an element into view without using any Javascript at all.

Scroll to element with vanilla Javascript

To scroll to the element with Javascript, you can create a button which scrolls back the the top when a user clicks it.

<article>
    ...
    <button onclick="document.getElementById('title').scrollIntoView()">
        Back to the top
    </button>
</article>

By using an event listener on the button, whenever it is invoked we get the heading element by its title identifier and tell it to scroll into the browser's viewport.

For most use cases, this is sufficient. But sometimes you'll would like to have a nice animation while scrolling. Luckily you can pass additional options to the method to do exactly that.

const titleElement document.getElementById('title')
titleElement.scrollIntoView({ behavior: 'smooth' })

By setting the behavior option to smooth, the browser will gently scroll to the element instead of the instant jump.

Scroll to a React element

Now the next step is to figure out how we can apply this smooth scrolling behavior on a React component. We can still use the Element.scrollIntoView() method, but we need to grab the component's underlaying HTML element to access it.

First, let's convert our example to a React functional component.

import React from 'react'

const Article = () => {
  return (
      <article>
            <h1>
                A React article for Latin readers
            </h1>
            <p>
                ...
            </p>
            <p>
                ...
            </p>
            <button>
                Back to the top
            </button>
        </article>
    )
}

We could still give the <h1> element an id attribute. But to do it the React way, we'll give a reference instead with the useRef hook. You can read more about the useRef() hook in the official React documentation.

import React, { useRef } from 'react'

const Article = () => {
  const titleRef = useRef()

  return (
      <article>
            <h1 ref={titleRef}>
                A React article for Latin readers
            </h1>

            // Rest of the article's content...

            <button>
                Back to the top
            </button>
        </article>
    )
}

Now we need to handle the user clicking the button to scroll back to the top. We can use an onClick event handler for that. You can read more about event handling in the official React documentation.

import React, { useRef } from 'react'

const Article = () => {
  const titleRef = useRef()

  function handleBackClick() {
    // Scroll back to the title element...
  }

  return (
      <article>
            <h1 ref={titleRef}>
                A React article for Latin readers
            </h1>

            // Rest of the article's content...

            <button onClick={handleBackClick}>
                Back to the top
            </button>
        </article>
    )
}

Within the event handler, we now have access to the title element through its reference. And we can scroll to the title element like we did in the vanilla Javascript example.

const titleRef = useRef()

function handleBackClick() {
  titleRef.current.scrollIntoView({ behavior: 'smooth' })
}

By using useRef() in a React component, we have an entry to the underlaying HTML element. This gives us full access to all of the powerful DOM APIs.

Scroll to a React component

Now that we have seen how we can scroll to an element by using a reference. We can utilize that same method to scroll to a React component. By forwarding the reference to the root element of the component, we again have access to the HTML element from outside the component.

import React, { forwardRef, useRef } from 'react'

const Article = forwardRef(({ onBackClick }, ref) => {
  return (
      <article>
            <h1 ref={ref}>
                A React article for Latin readers
            </h1>

            // Rest of the article's content...

            <button onClick={onBackClick}>
                Back to the top
            </button>
        </article>
    )
})

// ...

Const AnotherComponent = () => {
    const articleRef = useRef()

    function handleBackClick() {
      articleRef.current.scrollIntoView({ behavior: 'smooth' })
    }

    return <Article ref={articleRef} onBackClick={handleBackClick} />
}

As you may see in the example, we've used the forwardRef() method, to allow other components to access HTML elements within our Article component by reference. You can read more about the forwardRef() method in the official React documentation.

Bonus: scroll to the first error in a Formik form

To apply what we've learned to a real-world use case. Let's imagine we have a large React form using the Formik library to handle submission and validation. For example the following newsletter signup form.

import React from 'react'
import { Formik } from 'formik'

const SignupForm = () => {
  return (
      <Formik
        initialValues={{ email: '' }}
        validate={values => {
        const errors = {}

        if (!values.email) {
              errors.email = 'Required'
            }

            return errors
      }}
      onSubmit={values => {
        // ...
      }}
      >
          {formik => (
            <form onSubmit={formik.handleSubmit}>
              <label htmlFor="email">Email Address</label>
              <input
                id="email"
                name="email"
                type="email"
                onChange={formik.handleChange}
                value={formik.values.email}
              />
              {formik.errors.email ? <div>{formik.errors.email}</div> : null}
              <button type="submit">Submit</button>
            </form>
      )}
    </Formik>
  )
}

When a user tries to submit the form, it will display an error saying that the email field is required. In this small form the user will notice this immediately. But when the form grows larger, it would be nice to scroll the error into the viewport so the user notices the error.

We can do this by creating a small helper component that we add to the form.

import React, { useEffect } from 'react'
import { useFormikContext } from 'formik'

const ErrorFocus = () => {
  // Get the context for the Formik form this component is rendered into.
  const { isSubmitting, isValidating, errors } = useFormikContext()

  useEffect(() => {
    // Get all keys of the error messages.
    const keys = Object.keys(errors)

    // Whenever there are errors and the form is submitting but finished validating.
    if (keys.length > 0 && isSubmitting && !isValidating) {
      // We grab the first input element that error by its name.
      const errorElement = document.querySelector(`input[name="${keys[0]}"]`)

      if (errorElement) {
          // When there is an input, scroll this input into view.
        errorElement.scrollIntoView({ behavior: "smooth" })
      }
    }
  }, [isSubmitting, isValidating, errors])

  // This component does not render anything by itself.
  return null
}

Now add this <ErrorFocus> component to our Formik form and the user is automatically scrolled to the first input that has a validation error.

import React from 'react'
import { Formik } from 'formik'
import ErrorFocus from './error-focus'

const SignupForm = () => {
  return (
      <Formik
        initialValues={{ email: '' }}
        validate={values => {
        const errors = {}

        if (!values.email) {
              errors.email = 'Required'
            }

            return errors
      }}
      onSubmit={values => {
        // ...
      }}
      >
          {formik => (
            <form onSubmit={formik.handleSubmit}>
              <label htmlFor="email">Email Address</label>
              <input
                id="email"
                name="email"
                type="email"
                onChange={formik.handleChange}
                value={formik.values.email}
              />
              {formik.errors.email ? <div>{formik.errors.email}</div> : null}
              <button type="submit">Submit</button>

              {/* The component itself does not render anything, but needs to be within the Formik context */}
              <ErrorFocus />
            </form>
      )}
    </Formik>
  )
}

Closing thoughts

By using useRef() and forwardRef() in your React applications, you will have a lot of powerful DOM APIs at your disposal. In this article we've only focussed on Element.scrollIntoView(), but there are many more cool and handy methods you can use.
Did you know that you can even animate elements through Javascript? The MDN web documentation will tell you more about this Element.animate() method.

Going epic with Redux Observable tests

Robin van der Vleuten — Tue, 09 Jun 2020 10:02:26 +0000

The last couple of React projects I've developed where built with a lot of help from the Redux Observable library. It is an excellent library to separate your business logic from your components, but the correct way to test is still something they need to find out. In this article, I am gonna share my ideas on this topic.

So what is this Redux Observable?

For those who aren't aware with any of this library, I recommend to you to check out the RxJS + Redux + React = Amazing! talk by Jay Phelps. It's a very inspiring talk on how Netflix uses some common JS patterns combined with the powers of RxJS to manage your business logic within your React application. They've extracted the core from Netflix and shared it as an open-source library on Github.

Their documentation is excellent and contains a lot of small running examples to help get you started. The whole library deserves an article on its own, but one important aspect is still a bit underexposed. As a matter of fact, they are still struggling with the best way™ themselves;

Testing async code that creates side effects isn't easy. We're still learning the best way to test Epics. If you have found the perfect way, do share!
Redux Observable docs

After struggling with the Observable tests on a couple of projects, I would like to give my two cents on the topic in this article.

What epic are we going to test?

To get a nice epic to show how you can test asynchronous business logic, I came up with the following;

export const authenticateUserEpic = (action$, store, { client }) => {
  // Only act on actions of a given type,
  // in this case "USER_AUTHENTICATE_REQUEST".
  return action$.ofType('USER_AUTHENTICATE_REQUEST')
    // Map the received action to a new action "observable".
    .switchMap(action => {
      // Authenticate with the dispatched credentials in the action,
      // using the injected client instance.
      return client.authenticate(action.username, action.password)
        .then(response => {
          if (!response.isSuccessful) {
            // Map the response to a "failed" action with the error.
            return {
              type: 'USER_AUTHENTICATE_FAILURE',
              error: 'Something went wrong while authenticating',
            };
          }

          return {
            // Map the response to a "successful" action with a JWT token.
            type: 'USER_AUTHENTICATE_SUCCESS',
            idToken: response.idToken,
          };
        });
    });
}

As you may have noticed is this epic about authenticating an user with the dispatched credentials. I can imagine I would dispatch such action like this;

export const authenticate = (username, password) {
  return { type: 'USER_AUTHENTICATE_REQUEST', username, password };
}

dispatch(authenticate('johndoe', 'mysupersecretpassword'));

You may also have noticed that I've injected the client dependency into my epic. You could get a client instance through a require or import statement. But by using dependency injection it makes the client way easier to mock and your epic way easier to test.

Creating the tests with Jest

Most of the React projects out there seem to be using Jest, so I'll just use it in the example test.

My approach to test the above epic, is to get the expected action when the epic receives the dispatched action. So a quick glanse on the epic tells us that we need two tests; one where we expect USER_AUTHENTICATE_SUCCESS with a JWT token and one where we expect USER_AUTHENTICATE_FAILURE with an error.
To define them as Jest tests, one would define them as follows;

describe('authenticateUserEpic', () => {
  it('should dispatch a JWT token when authenticating is successful', () => {
    // ...
  })

  it('should dispatch an error when authenticating has failed', () => {
    // ...
  })
});

So let us focus on the first test for now. We need pass the epic the dispatching action and get the resulting action when the RxJS Observable completes.
There are many ways to write such code, but the following works the best for me;

import { ActionsObservable } from 'redux-observable';
import authenticateUserEpic from './epics';

// ...

it('should dispatch a JWT token when authenticating is successful', async () => {
  // The response object we expect to receive from the server.
  const response = {
    isSuccessful: true,
    idToken: 'a-random-generated-jwt',
  };

  // Create a fake client instance which will return
  const client = { authenticate: jest.fn() };
  client.authenticate.mockReturnValue(Promise.resolve(response));

  // Create an Observable stream of the dispatching action.
  const action$ = ActonsObservable.of({
    type: 'USER_AUTHENTICATE_REQUEST',
    username: 'johndoe',
    password: 'mysupersecretpassword',
  });

  // Pass the Observable action to our action and inject the
  // mocked client instance.
  const epic$ = authenticateUserEpic(action$, store, { client });

  // Get the resulting actions by using async/await.
  const result = await epic$.toArray().toPromise();

  // Test if we've received the expected action as result.
  expect(result).toEqual([
    { type: 'USER_AUTHENTICATE_SUCCESS', idToken: 'a-random-generated-jwt' }
  ])
});

Not that hard right? You'll need to understand RxJS first. But after that, you will get a nice separation of concerns in your React applications.
To make the examples complete, the following test will handle the failed response;

it('should dispatch an error when authenticating has failed', async () => {
  // The response object we expect to receive from the server.
  const response = {
    isSuccessful: false,
  };

  // Create a fake client instance which will return
  const client = { authenticate: jest.fn() };
  client.authenticate.mockReturnValue(Promise.resolve(response));

  // Create an Observable stream of the dispatching action.
  const action$ = ActonsObservable.of({
    type: 'USER_AUTHENTICATE_REQUEST',
    username: 'johndoe',
    password: 'mysupersecretpassword',
  });

  // Pass the Observable action to our action and inject the
  // mocked client instance.
  const epic$ = authenticateUserEpic(action$, store, { client });

  // Get the resulting actions by using async/await.
  const result = await epic$.toArray().toPromise();

  // Test if we've received the expected action as result.
  expect(result).toEqual([
    { type: 'USER_AUTHENTICATE_FAILURE', error: 'Something went wrong while authenticating' }
  ])
});

Did I got some headaches along the way? I definitely got some questions before I had a basic understanding of RxJS! But luckily the Redux Observable community was very helpful. And now I have a very valuable new tool to structure my React applications around 👌

DEV Community: Robin van der Vleuten

Use previous value through a React hook

What to do with this hook?

How to use Vim on Linux and macOS

How to open a file

How to edit a file

How to exit Vim

How to capitalize strings in JavaScript

TLDR;

Walk through all steps

Uppercase the first letter

Slice the rest of the letters

Just use CSS

How to use React context

What is React Context?

How is this different from useState()?

How does the context API work?

Create a custom context provider

Closing thoughts

Trap focus in a React component

Trap focus with vanilla JavaScript

Trap focus with React

Closing thoughts

Scroll a React component into view

Scroll to element with plain HTML

Scroll to element with vanilla Javascript

Scroll to a React element

Scroll to a React component

Bonus: scroll to the first error in a Formik form

Closing thoughts

Going epic with Redux Observable tests

So what is this Redux Observable?

What epic are we going to test?

Creating the tests with Jest

How is this different from `useState()`?