Testing With Jest

testingJest.md

What to Test

Testing interfaces

• Child component with the right props

import EditProfileForm from "../feedbackForm";
import Checkbox from "../checkbox";
import EmailInput from "../EmailInput";
import TextInput from "../TextInput";

describe("FeedbackForm", () => {
  let props;
  let submitSpy;
  let form;
  
  beforeEach(() => {
    submitSpy = jest.fn();
    props = {
      userName: "janeDoe",
      firstName: "Jane",
      lastName: "Doe",
      email: "janeDoe@example.com",
      submit: submitSpy
    }
    form = shallow(<EditProfileForm {...props} />);
  });
  describe("render", () => {
    test("renders emailInput with right props", () => {
      const emailInput = form.find(EmailInput);
      expect(emailInput).toHaveLength(1);
      expect(emailInput.props()).toEqual({
        value: props.email
      });
    });
    
    test("renders the text input with right props", () => {
      const textInputs = form.find(TextInput);
      expect(textInputs).toHaveLength(3);
      expect(textInputs.at(0).props()).toEqual({
        value: props.userName,
        locked: true
      });
      expect(textInputs.at(1).props()).toEqual({
        value: props.firstName,
        locked: false
      });
      expect(textInputs.at(2).props()).toEqual({
        value: props.lastName,
        locked: false
      });
    });
  });
  
  describe("submit", () => {
    test("submit with the right props", () => {
      form.simulate("click");
      expect(submitSpy).toHaveBeenNthCalledWith(1, {
        email: form.state().email,
        firstName: form.state().firstName,
        lastName: form.state().lastName
      });
    });
  });
    
   
  
  
})

Mock and Spy with Jest