snapshot_jest_1.spec.js

import React from 'react';
import { mount } from 'enzyme';

import { UsersComponent } from './users.component';

const data = [
  {
    id: '5c76f0b7bb5c210da0f8554a',
    firstName: 'Florine',
    lastName: 'Russell',
    email: 'florine.russell$email..org',
  },
];

describe('Users component', () => {
  //Snapshot way
  it('renders list with one row', async () => {
    const fetchUsersList = jest.fn(() => new Promise(resolve => resolve(data)));
    const wrapper = mount(<UsersComponent fetchUsersList={fetchUsersList}/>);

    wrapper.update();

    expect(wrapper).toMatchSnapshot();
  });

  //Traditional way
  it('renders list with one row without snapshot', async () => {
    const fetchUsersList = jest.fn(() => new Promise(resolve => resolve(data)));
    const wrapper = mount(<UsersComponent fetchUsersList={fetchUsersList}/>);

    wrapper.update();

    expect(wrapper.find('h1').length).toBe(1);
    expect(wrapper.find('h1').text()).toBe('List of 8 users');

    expect(wrapper.find('button').length).toBe(1);
    expect(wrapper.find('button').text()).toBe('add new user');

    expect(wrapper.find('ul').children().length).toBe(8);
    //...
  });
});