axios testing react

Home.js

import Autosuggest from "react-autosuggest";
import React, { Component } from "react";
import "./Home.css";
import SuggestionValue from "./SuggestionValue";
import axios from "axios";
import { find } from "lodash";
import config from "../config";

const renderSuggestion = suggestion => suggestion.q;

class Home extends Component {
  constructor() {
    super();
    this.state = {
      type: "",
      lang: "en",
      page_id: "",
      query: "",
      suggestions: [],
      selected: ""
    };
  }

  onInputChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  };

  onQueryChange = (event, { newValue }) => {
    this.setState({
      query: newValue
    });
  };

  onKeyPress = e => {
    if (e.key === "Enter") {
      const { suggestions, query } = this.state;
      this.setState({
        selected: { method: "enter", suggestions, query },
        suggestions: []
      });
    }
  };

  onSuggestionsFetchRequested = async ({ value }) => {
    const suggestions = await this.getSuggestions(value);
    this.setState({
      suggestions: suggestions,
      selected: false
    });
  };

  getSuggestions = value => {
    const { lang, page_id, type } = this.state;
    return new Promise(resolve => {
      axios({
        method: "get",
        url: `${
          config.URL
        }/search/?q=${value}&lang=${lang}&page_id=${page_id}&type=${type}`,
        validateStatus: status => {
          return true;
        }
      })
        .catch(error => {
          console.log(error);
        })
        .then(response => {
          !response || response.data.error
            ? resolve([])
            : resolve(response.data.data);
        });
    });
  };

  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

  onSuggestionSelected = (event, { suggestion, suggestionValue, method }) => {
    this.setState({
      selected: { suggestion, method },
      suggestions: []
    });
  };
  getSuggestionValue = suggestion => this.state.query;

  handleOnClick = qid => {
    const suggestion = find(this.state.selected.suggestions, { qid });
    this.setState({
      selected: {
        method: "click",
        suggestion: suggestion
      }
    });
  };

  render() {
    const { type, lang, page_id, query, suggestions, selected } = this.state;

    // Autosuggest will pass through all these props to the input.
    const inputProps = {
      placeholder: "I have a question about ...",
      value: query,
      onChange: this.onQueryChange,
      className: "form-control search-faq",
      onKeyPress: this.onKeyPress
    };

    return (
      <div className="containers">
        <div className="container-fluid">
          <div className="row">
            <div className="input-group">
              <h1>FAQ Check (Testing)</h1>
            </div>
            <div className="input-group">
              <div className="col-md-2">
                <select
                  className="form-control search-faq"
                  id="lang"
                  onChange={this.onInputChange}
                  value={lang}
                >
                  <option value="en">English</option>
                  <option value="ja">Japanese</option>
                  <option value="tw">Taiwanese</option>
                </select>
              </div>
              <div className="col-md-2">
                <input
                  type="text"
                  className="form-control search-faq"
                  id="page_id"
                  placeholder="Page id"
                  value={page_id}
                  onChange={this.onInputChange}
                />
              </div>
              <div className="col-md-2">
                <input
                  type="text"
                  className="form-control search-faq"
                  placeholder="Type"
                  id="type"
                  value={type}
                  onChange={this.onInputChange}
                />
              </div>
              <div className="col-md-6">
                <Autosuggest
                  suggestions={suggestions}
                  onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                  onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                  onSuggestionSelected={this.onSuggestionSelected}
                  getSuggestionValue={this.getSuggestionValue}
                  renderSuggestion={renderSuggestion}
                  inputProps={inputProps}
                  focusInputOnSuggestionClick={true}
                />
                <i className="fa fa-search icon-search" />
                <div className="input-group search-complete" />
              </div>
            </div>
          </div>
          <SuggestionValue
            selected={selected}
            handleOnClick={this.handleOnClick}
          />
        </div>
      </div>
    );
  }
}

export default Home;

Home.test.js

import React from "react";
import ReactDOM from "react-dom";
import Home from "../Home";
import axios from "axios";
import { shallow } from "enzyme";
import mockAdapter from "axios-mock-adapter";
import config from "../../config";

const homeComponent = shallow(<Home />);
const axiosMockAdapter = new mockAdapter(axios);
const autoSuggest = homeComponent.find("Autosuggest");

describe("Home", () => {
  it("renders without crashing", () => {
    const div = document.createElement("div");
    ReactDOM.render(<Home />, div);
    ReactDOM.unmountComponentAtNode(div);
  });
  it("should render 1 <Autosuggest /> component", () => {
    expect(autoSuggest.length).toEqual(1);
  });
  it("should change states when input change", () => {
    homeComponent
      .find("#type")
      .simulate("change", { target: { value: "facebook123", id: "type" } });
    expect(homeComponent.state()).toEqual({
      lang: "en",
      page_id: "",
      query: "",
      selected: "",
      suggestions: [],
      type: "facebook123"
    });
  });
  it("should get suggestions when query changes", done => {
    const response = {
      data: [
        {
          q: "E-money License",
          a: "Electronic Money Institution"
        }
      ]
    };
    axiosMockAdapter
      .onGet(`${config.URL}/search/?q=123&lang=en&page_id=&type=facebook123`) // the url should be the same in the code
      .reply(200, response);
    autoSuggest.simulate("suggestionsFetchRequested", { value: 123 });
    setImmediate(() => {
      expect(homeComponent.state()).toEqual({
        lang: "en",
        page_id: "",
        query: "",
        selected: false,
        suggestions: [
          {
            a: "Electronic Money Institution",
            q: "E-money License"
          }
        ],
        type: "facebook123"
      });
      done();
    });
  });
});