Enzyme is a JavaScript library for testing the React component's output and it is developed by Airbnb. Enzyme has a really nice API for DOM manipulation and traversing. If you have used jQuery, it is really easy to understand the idea of the Enzyme API.

To start using Enzyme, perform the following steps:

1. Install it by typing the following command into your terminal. This will install the enzyme library and the adapter library for React version 16. There is an adapter available for older React versions:

npm install enzyme enzyme-adapter-react-16 --save-dev

2. Create a new test file (test suite) called AddCar.test.js in the src folder. Now we are going to create an Enzyme shallow-rendering test for our AddCar component. The first test case renders the component and checks that there are five TextInput components, as there should be. wrapper.find finds every node in the render tree that matches TextInput. With Enzyme tests, we can use Jest for assertions and here we are using toHaveLength to check that the found node count equals five. Shallow rendering tests the component as a unit and does not render any child components. For this case, shallow rendering is enough. Otherwise you can also use the full DOM rendering by using mount:

import React from 'react';
import AddCar from './components/AddCar';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

describe('<AddCar />', () => {
  it('renders five <TextInput /> components', () => {
    const wrapper = shallow(<AddCar />);
    expect(wrapper.find('TextField')).toHaveLength(5);
  });
});

3. Now, if you run the tests, you can see the following message in the terminal. You can also see that the number of test suites is two because the new test file and all tests passed:

You can also test events with Enzyme using the simulate method. The following example shows how to test the onChange event of the TextField brand in the AddCar component. This example also shows how to access the state of the component. We first use wrapper.find to find the first TextField, which is used for the car brand. Then, we set the value of TextField and use the simulate method to simulate the change event. Finally, we check the value of the brand state that should now contain Ford:

describe('<AddCar />', () => {
  it('test onChange', () => {
    const wrapper = shallow(<AddCar />);
    const brandInput = wrapper.find('TextField').get(0);
    brandInput.instance().value = 'Ford';
    usernameInput.simulate('change');
    expect(wrapper.state('brand')).toEqual('Ford');
  });
});