title: Jest spyOn is not a function
body: <p>I'm using Jest to test my React component but I've encountered an error I had never seen before.</p>
  
  <p>here's my <code>&lt;Row/&gt;</code> component:</p>
  
  <pre><code>class Row extends React.Component {
  
    constructor() {
      super();
      this.state = { userId: '', showDetails: false, showModal: false, status: '', value: '' }
      this.handleStatusChange = this.handleStatusChange.bind(this)
      this.handleModalCancel = this.handleModalCancel.bind(this)
      this.handleModalConfirm = this.handleModalConfirm.bind(this)
      this.showDetailsPanel = this.showDetailsPanel.bind(this)
    }
  
    showDetailsPanel() {
  
      if(!this.state.showDetails) {
        this.setState({
          showDetails: true
        });
      } else {
        this.setState({
          showDetails: false
        });
      }
    }
  
    handleModalCancel() {
      this.setState({
        showModal: false
      });
    }
  
    handleStatusChange(e) {
      this.setState({
        showModal: true,
        value: e.target.value,
      });
    }
  
    handleModalConfirm() {
      this.setState({
        showModal: false
      });
      this.props.model.status = this.state.value;
    }
  
    componentWillMount() {
      this.props.model.fullName = `${this.props.model.firstName} ${this.props.model.lastName}`
    }
  
    render() {
  
      const { model, modelProps, actions } = this.props;
  
      return (
        &lt;div className="c-table__row"&gt;
          {this.state.showModal ?
             &lt;Modal
               title="Are you sure?"
               copy={`Are you sure that you want to change the staus of this user to ${this.state.value}?`}
               confirmText="Yes I'm sure"
               cancel={this.handleModalCancel}
               submit={this.handleModalConfirm}
             /&gt;
             : null
          }
          &lt;div className="c-table__row-wrapper"&gt;
          {modelProps.map((p, i) =&gt;
            &lt;div className={`c-table__item ${model[p] === "Active" || model[p] === "Suspended" || model[p] === "Locked" ? model[p] : ""}`} key={i}&gt;
              {model[p]}
            &lt;/div&gt;
          )}
          &lt;div className="c-table__item c-table__item-sm"&gt;
            &lt;a onClick={this.showDetailsPanel} className={this.state.showDetails ? "info showing" : "info"}&gt;&lt;Icon yicon="Expand_Cross_30_by_30" /&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        {this.state.showDetails ?
          &lt;Details
            tel={model.telephoneNumber}
            dept={model.department}
            role={model.role}
            username={model.username}
            status={model.status}
            statusToggle={this.handleStatusChange}
          /&gt;
        : null }
        &lt;/div&gt;
      );
    }
  }
  
  export default Row;
  </code></pre>
  
  <p>And here's my test:</p>
  
  <pre><code>import React from 'react';
  import {shallow, mount} from 'enzyme';
  import { shallowToJson } from 'enzyme-to-json'
  import renderer from 'react-test-renderer';
  import Row from '../../../src/components/tables/row.jsx';
  
  
  test('clicking the info button should call showDetailsPanel', () =&gt; {
  
    const component = mount(&lt;Row model={{a: 1, b: 2}} modelProps={['a', 'b']}/&gt;)
    const showDetailsPanel = jest.spyOn(component.instance(), 'showDetailsPanel');
    component.update();
    const button = component.find('.info')
  
    button.simulate('click')
    expect(showDetailsPanel).toBeCalled();
  
  })
  </code></pre>
  
  <p>So I'm simply trying to check that when the <code>info</code> button is clicked the showDetailsPanel is called, but it fails with <code>TypeError: jest.spyOn is not a function</code>.<br>
  I'm using <code>"jest": "^18.1.0","jest-cli": "^18.1.0","jest-junit": "^1.5.1"</code>.</p>
  
  <p>Any idea?</p>
  
  <p>Thanks in advance</p>