score:4

Accepted answer

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);
})

Related Query

More Query from same tag