Rendering using react-testing-library

Using react-dom we have code like this to test a react component

import React from "react";
import ReactDOM from "react-dom";

let container = null;
beforeEach(() => {
  // setup a DOM element as a render target
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // cleanup on exiting
  ReactDOM.unmountComponentAtNode(container);
  container.remove();
  container = null;
});

/* ######## setup code above ######## */

function App() {
  return (
    <div>
      <h1>Hello!</h1>
    </div>
  );
}

test("render app", () => {
  ReactDOM.render(<App />, container);
  expect(document.querySelector("h1").textContent).toBe("Hello!");
});

Rendering

when using react-testing-library we can start by importing render and use it instead of ReactDOM

  import React from 'react'
  import ReactDOM from 'react-dom'
+ import { render } from '@testing-library/react'

  let container = null
  beforeEach(() => {
    // setup a DOM element as a render target
    container = document.createElement('div')
    document.body.appendChild(container)
  })

  afterEach(() => {
    // cleanup on exiting
    ReactDOM.unmountComponentAtNode(container)
    container.remove()
    container = null
  })

  /* ######## setup code above ######## */

  function App() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    )
  }

  test('render app', () => {
-   ReactDOM.render(<App />, container)
+   render(<App />)
    expect(document.querySelector('h1').textContent).toBe('Hello!')
  })

Automatic cleanup

You may notice that render doesn't require us to pass a container (nor to add anything to document.body anymore) then, we can remove the setup and teardown blocks

note: in old tutorials you may see import of react-testing-library/cleanup this is no longer required as the beforeEach and afterEach are automatically registered now

  import React from 'react'
- import ReactDOM from 'react-dom'
  import { render } from '@testing-library/react'
-
- let container = null
- beforeEach(() => {
-   // setup a DOM element as a render target
-   container = document.createElement('div')
-   document.body.appendChild(container)
- })
-
- afterEach(() => {
-   // cleanup on exiting
-   ReactDOM.unmountComponentAtNode(container)
-   container.remove()
-   container = null
- })
-
- /* ######## setup code above ######## */

  function App() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    )
  }

  test('render app', () => {
    render(<App />)
    expect(document.querySelector('h1').textContent).toBe('Hello!')
  })

Author: Jaga Santagostino