dependency_injection.js

// Source: https://github.com/tmikeschu/the-spoken-tour

// ContactForm.jsx
import React, { Component } from "react"
import APIService from "../../APIService/APIService"

const apiService = new APIService("https://spoken-api.herokuapp.com")

export default class ContactForm extends Component {
  constructor(props) {
    super(props)
    this.state = {
      contact: {
        name: "",
        email: "",
        message: ""
      },
      ...
    }
    ...
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  ...

  async handleSubmit(event, service, messageData) {
    event.preventDefault()
    const response = await service.post("api/v1/contact", messageData)
    this.handleResponse(response)
    return response
  }
  
  ...
  
  render() {
    return (
      <article className="component-container contact-form">
        <form onSubmit={event => this.handleSubmit(event, apiService, this.state.contact)}>
        ...
        </form>
      </article>
    )
  }
}

// ContactForm.spec.js
import React from "react"
import { shallow, mount } from "enzyme"
import ContactForm from "./ContactForm"

describe("<ContactForm />", () => {
  describe("#handleSubmit", () => {
    it("makes a post request", async () => {
      const contactForm = shallow(<ContactForm />)
      const response = await contactForm.instance()
        .handleSubmit(fakeEvent, fakeService, expectedMessageData)

      const expectedResponse = {
        status: 201,
        data: "AHH!"
      }

      expect(response).toEqual(expectedResponse)
    })
  })
})


const fakeService = {
  post(url, data) {
    return {
      status: 201,
      data: "AHH!"
    }
  }
}

const expectedMessageData = {
  contact: {
    name: "Tommy", email: "[email protected]", message: "yo yo yo"
  }
}

const fakeEvent = {
  contact: {
    name: "Tommy", email: "[email protected]", message: "yo yo yo"
  },
  preventDefault() {}
}