How to write tests using Jest and Enzyme: React JS Testing Utilities used at Facebook and Airbnb

describe("The components are rendered", () => {
  it("renders App component without crashing", () => {
    shallow(<App />);
  });

  it("renders Form component without crashing", () => {
    shallow(<Form />);
  });

  it("renders FormList component without crashing", () => {
    shallow(<FormList />);
  });

  it("renders title without crashing", () => {
    const wrapper = shallow(<App />);

    const header = <h1>Become a volunteer</h1>;
    expect(wrapper.contains(header)).toBe(true);
  });

  it("renders form inputs", () => {
    const wrapper = shallow(<Form />);

    expect(wrapper.find('input[name="volunteerName"]')).toHaveLength(1);
    expect(wrapper.find('input[name="hours"]')).toHaveLength(1);
    expect(wrapper.find('select[name="jobTitle"]')).toHaveLength(1);
  });

  it("renders submit button without crashing", () => {
    const wrapper = shallow(<Form />);

    const label = wrapper.find("#submit-button").text();
    expect(label).toBe("Submit");
  });
});

Figure 2 – Checking components rendering.

4.2 Passing props

import { forms } from "../db.json";

describe("FormList is passing props", () => {
  it("accepts props", () => {
    const wrapper = mount(<FormList forms={forms} />);
    expect(wrapper.props().forms).toEqual(forms);
  });

  it(`should have all properties`, () => {
    const wrapper = mount(<FormList forms={forms} />);
    const renderedForms = wrapper.props().forms;
    for (let i = 0; i < renderedForms.length; i += 1) {
      expect(renderedForms[i]).toHaveProperty("id");
      expect(renderedForms[i]).toHaveProperty("volunteerName");
      expect(renderedForms[i]).toHaveProperty("hours");
      expect(renderedForms[i]).toHaveProperty("jobTitle");
    }
  });
});

Figure 3 – Checking if the component accepted props.

4.3 Events

On a form, actions can be done using event handlers. Figure 4 shows some examples of how to test the events such as changing the input’s value, submitting the form, and resetting the form. The change event is simulated for all the form inputs.

Following the DRY principle, the logic of simulating the change action of an input was extracted into the simulateOnChangeInput() function. For each input, it’s expected that the new values will be sent to the change method.

After the inputs have been filled with the given values, the click event on the reset button is simulated. The new values that are expected to be received from the inputs are the default ones. 

const simulateOnChangeInput = (wrapper, inputSelector, newValue) => {
  const input = wrapper.find(inputSelector);
  input.simulate("change", {
    target: { value: newValue },
  });

  return wrapper.find(inputSelector);
};

describe("The events are working", () => {
  it("fill the form with values and then reset the form", () => {
    const wrapper = shallow(<Form />);

    const updatedNameInput = simulateOnChangeInput(
      wrapper,
      "#volunteerName-input",
      "Endzela Gaye"
    );
    const updatedHourInput = simulateOnChangeInput(
      wrapper,
      "#hours-input",
      "2"
    );
    const updatedJobTitleInput = simulateOnChangeInput(
      wrapper,
      "select",
      "Food supply"
    );
    
    expect(updatedNameInput.props().value).toBe("Endzela Gaye");
    expect(updatedHourInput.props().value).toBe("2");
    expect(updatedJobTitleInput.props().value).toBe("Food supply");

    wrapper.find("#reset-button").simulate("click");

    expect(wrapper.find("#volunteerName-input").props().value).toBe("");
    expect(wrapper.find("#hours-input").props().value).toBe("");
    expect(wrapper.find("#job-input").props().value).toBe("Raising funds");
  });
});

Figure 4 – Filling the form with values and then resetting it

4.4 Mock functions

describe("The events are working", () => {
  it("The form is submitted when the click event is fired by simulated click on the submit button", () => {
    const mockCallBack = jest.fn();

    const wrapper = shallow(<Form onSubmit={mockCallBack()} />);

    wrapper.find("#submit-button").simulate("click");
    expect(mockCallBack).toHaveBeenCalledTimes(1);
  });
});

Figure 5 – Submitting the form

5. Snapshot Testing

describe("Snapshot", () => {
  it("matches App the snapshot", () => {
    const wrapper = mount(<App />);
    expect(toJson(wrapper)).toMatchSnapshot();
  });
});

Figure 6– Checking if the snapshots are matching

When the tests are run for the first time, a folder named __snapshots__ is created where the snapshot is saved:

Figure 7 – __snapshots__ file

Every time the tests are run, Jest compares the output of the component with the previous Jest snapshot and it will display an error message if there are any differences between them. (Figure 8)
 

Figure 8 – Differences between the snapshot and the rendered component

A message like this will appear: “1 snapshot failed from 1 test suite. Inspect your code changes or press `u` to update them.”

 

6. Ensure that your tests are written well!

After you’ve checked that your tests pass, a good practice is to then break them and check if they still pass.

 

Figure 9 - Breaking a test

 

If the text that is expected to be received from the submit button is "Reset", an error will be displayed in the console where the name of the test that crashed is given together with the expected and received values.

 

 

7. Conclusion

I hope that you found this article helpful and that it’s given you a broad understanding of React JS unit testing. The libraries presented are very easy to use and come to the aid of developers to make the testing process as easy as writing an application and if Facebook tests with Jest and Airbnb test with Enzyme, that should be enough reason for you to also give it a try. 



Did you like this article and did you find it helpful? Leave us a message!

 

You can read more from the same author here: 

How to create your first schema in GraphQL | ASSIST Software Romania (assist-software.net)
Redux Basics for Beginners | ASSIST Software Romania (assist-software.net)