Jest spyOnは関数ではありません

Question

Jestを使用してReactコンポーネントをテストしていますが、これまでに見たことがないエラーが発生しました。

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 (
     <div className="c-table__row"> 
     {this.state.showModal ? 
      <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} 
      /> 
      : null 
     } 
     <div className="c-table__row-wrapper"> 
     {modelProps.map((p, i) => 
      <div className={`c-table__item ${model[p] === "Active" || model[p] === "Suspended" || model[p] === "Locked" ? model[p] : ""}`} key={i}> 
      {model[p]} 
      </div> 
     )} 
     <div className="c-table__item c-table__item-sm"> 
      <a onClick={this.showDetailsPanel} className={this.state.showDetails ? "info showing" : "info"}><Icon yicon="Expand_Cross_30_by_30" /></a> 
     </div> 
     </div> 

     {this.state.showDetails ? 
     <Details 
      tel={model.telephoneNumber} 
      dept={model.department} 
      role={model.role} 
      username={model.username} 
      status={model.status} 
      statusToggle={this.handleStatusChange} 
     /> 
     : null } 
     </div> 
    ); 
    } 
} 

export default Row; 

そして、ここでは私のテストです：

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',() => { 

    const component = mount(<Row model={{a: 1, b: 2}} modelProps={['a', 'b']}/>) 
    const showDetailsPanel = jest.spyOn(component.instance(), 'showDetailsPanel'); 
    component.update(); 
    const button = component.find('.info') 

    button.simulate('click') 
    expect(showDetailsPanel).toBeCalled(); 

}) 

だから私は単にinfoボタンがクリックされたときにshowDetailsPanelが呼び出されたことを確認しようとしているが、それだここ

は私の<Row/>コンポーネントですTypeError: jest.spyOn is not a functionで失敗します。
私は"jest": "^18.1.0","jest-cli": "^18.1.0","jest-junit": "^1.5.1"を使用しています。

事前

Answer 1

で

おかげであなたは冗談バージョン18.1.0を使用しているが、19.0.0にjest.spyOn追加されました。

これを使用する場合は、Jestをアップグレードする必要があります。

npm install --save-dev jest@latest 

それともYarnを使用している場合：

yarn upgrade jest --latest