Start testing. React to ingredients with enzyme and joke.

Unfortunately, when I work, we are not running unit tests on React Components. As I am fairly new to the industry, I have no experience writing unit tests for software. This puts me in a weird quandary when I try to learn on my own, as the examples I've seen on the internet are either poorly explained or simply not meant for beginners. I recently checked out testing React Components with Enzyme and Jest and thought the combination looks promising.

My goal is to: . I would like to find the right way to check if the React props from parent to child are working correctly. I am using Jest and Enzyme, so the solution is to use best practices with these two modules.

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

• UserList (parent)
• UserListItem (Child)

Here is the UserList React component . To unfortunately try to simplify this example, I just put the data to be passed to the child in a local state. Let's assume 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 on the internet, I see that shallow rendering via Enzyme is the preferred method. I already understand how this works, but what I'm really looking for is the end and careful props checking.

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