Setting up Basic Wiring Structure

Once we know which parts of our component we want to target, and how we're going to target them, it's just a matter of a building out the data structure that react-wiring-library will use to traverse your elements.

While the different options for capturing every possible component variation can get involved, the core idea is very simple. You're building a tree of DOM elements that are relevant to your tests. Each node in the tree will tell react-wiring-library how to find, interact with, and then serialize a given element.

Scaffolding

To get started, we need to add a single file called testRender.js(just a convention). This function will be a replacement for the standard render function imported from react-testing-library. In general, this file contain a single wiring tree for your whole app.

import {getRender} from 'react-wiring-library'

const wiring = {}

export default getRender(wiring)

First wiring node

As TodoList is the top level component and is what we'll be serializer, let's start there. Define a wiring node and target it at the test ID we added in the previous step.

const wiring = {
  children: {
    todoList: {
      findType: 'testId',
      findValue: 'todo-list',
    },
  },
}

The root node of the wiring tree always has children. Setting the key as todoList in this object, means that findTodoList will be returned when we call render.

The question then becomes, which DOM element should findTodoList return? That's where findType and findValue come in. findType corresponds to a query type from dom-testing-library and findValue is the argument passed into the findBy version of that query.

So, when we call findTodoList it's the equivalent of the following.

findByTestId('todo-list')

First Serializer

Now that we the core structure in place, let's add a placeholder serializer to make sure everything is working.

const wiring = {
  children: {
    todoList: {
        ...
      serialize: () => 'TodoList',
    },
  },
}

Serializers are just functions that take DOM elements and return easily readable strings. In this case, we're just returning a static string to confirm the tree is working.

First test

Now that we have some wiring to work with, we can actually use react-wiring-library to interact with our component in tests.

Let's create a new test called TodoList.test.js.

import React from 'react'
import render from './testRender.js'
import TodoList from './TodoList'

describe('TodoList', () => {
  test('should render a list of todos', async () => {
    const {findTodoList, serialize} = render(
      <TodoList
        todos={[
          {
            name: 'Todo One',
          },
          {
            name: 'Todo Two',
          },
        ]}
      />,
    )
  })
})

You can see this behaves very similarly to the standard render function from react-testing-library. The exception is that we get back a custom function called findTodoList. This, you'll remember, is based on the fact that we used todoList as a key in children object the root node.

Calling findTodoList gets us back a todoList DOM element that we can pass into toMatchSnapshot to render out a nice, readable snapshot. For now, let's just call the serialize helper. Instead of actually generating snapshot, serialize just logs the content of the snapshot to the console.

describe('TodoList', () => {
  test('should render a list of todos', async () => {
    ...
    const { todoList } = await findTodoList();
    serialize(todoList);
  })
})

after calling serialize, this is what we see in the console

TodoList

Great! This means that supplied test ID is being being found and our component is being serialized according to the serialize function we passed in.

Source Code

testRender.js

import {getRender} from 'react-wiring-library'

const wiring = {
  children: {
    todoList: {
      findType: 'testId',
      findValue: 'todo-list',
      serialize: () => 'TodoList',
    },
  },
}

export default getRender(wiring)

TodoList.test.js

describe('TodoList', () => {
  test('should render a list of todos', async () => {
    const {findTodoList, serialize} = render(
      <TodoList
        todos={[
          {
            name: 'Todo One',
          },
          {
            name: 'Todo Two',
          },
        ]}
      />,
    )
    const {todoList} = await findTodoList()
    serialize(todoList)
  })
})

Next Steps

With the foundation in place, we can generate a snapshot that captures everything interesting about TodoList.