Getting started testing React components with Enzyme and Jest

Question

Unfortunately, where I am working, we do not do unit tests on React Components. As I am fairly new to the industry as well, I have no experience whatsoever writing unit tests for software. This puts me in an odd predicament when trying to learn on my own, as the examples I have seen online are either poorly explained, or just not meant for beginners. I recently checked out testing React Components with Enzyme and Jest, and thought the combination looked promising.

My goal here is this: I would like to find out the correct way to test if React props are working correctly all the way from the parent to the child component. I am using Jest and Enzyme, so the solution should use best practices with these two modules.

For simplicity's sake, I wanted to pose this question around two example components. Instead of names you would never see in the real world, let's pretend that these components when used in tandem, will produce a list of users to the screen. The components will be named:

1. UserList (The Parent)
2. UserListItem (The Child)

Here is the UserList React component. To hopefully try to simplify this example, I just put the data that's going to be passed to the child in local state. Let's assume that this data will always be an array of objects.

import React, { Component } from 'react'
import UserListItem from './user-list-item'

export default class UserList extends Component {
  constructor(props) {
    super(props)

    this.state = {
      users: [
        {
          userName: 'max',
          age: 24
        },
        {
          userName: 'susan',
          age: 28
        }
      ]
    }
  }

  renderUsers = (list) => {
    return this.state.users.map(user => <UserListItem key={user.userName} user={user} />)
  }

  render() {
    return (
      <ul>
        {this.renderUsers()}
      </ul>
    )
  }
}

Now, here is the child component, UserListItem

import React, { Component } from 'react'

const UserListItem = ({ user }) => {
  return (
    <li>
      <div>
        User: {user.userName}
      </div>
      <div>
        Age: {user.age}
      </div>
    </li>
  )
}

export default UserListItem

From reading various tutorials online, I see that shallow rendering via Enzyme is the preferred way to go. I already understand how that works, but what I am really looking for is an end to end and thorough test of the props.

Also, is it enough to just check if a React component is being passed a specific prop name? Or do we also need to create some type of fake array with dummy data in it to give to the child component?

Answer 1

For your current component I'd write a test that makes sure the elements on the state are being rendered correctly, for example:

it('should render two UserListItems', () => {
  const cmp = shallow(<UserList />);

  expect(cmp.find(UserList).length).toBe(2);
})

I'd also test if the data sent to the children is correct. In this case the users state of UserList should show up in the props of each child UserListItem.

it('should send the correct data', () => {
  const user = { userName: 'test', age: 22 };
  const cmp = shallow(<UserList />);
  cmp.setState({ users: [user] });

  expect(cmp.find(UserListItem).props().user).toBe(user);
})

For the UserListItem component, I'd tests that the name and age are being rendered correctly.

it('should render name and age', () => {
  const user = { userName: 'test', age: 22 };
  const cmp = shallow(<UserListItem user={user} />);


  expect(cmp.find('div[children="User: test"]').length).toBe(1);
  expect(cmp.find('div[children="Age: 22"]').length).toBe(1);
})