Extracting a test helper

In the first chapter, our test suites shared common code for constructing a DOM container element before each test. This element was used as the React root element. By doing this for each test, we avoided modifying global state. Let's extract that code so that we can re-use it across all of our test suites.

The shared code can be split into four parts:

• A common declaration of container in the describe block, accessible by all tests
• A beforeEach call to set container to a newly constructed container element
• A render function to insert DOM elements into the container
• Various expectations on the container to verify its content

At first glance, it might seem difficult to extract this logic since the container variable is manipulated in both a beforeEach block and each of our test functions. However, it's possible if we use a higher-order function that encapsulates its own state.

Create a new file test/domManipulators.js, and add the following content:

import ReactDOM from 'react-dom';

export const createContainer = () => {
  const container = document.createElement('div');

  return {
    render: component => ReactDOM.render(component, container),
    container
  };
};

Calling domManipulators creates an empty DOM element, container, and then returns an object with two properties: render and container. We'll see how these can be used in the next section.