Jest spyOn関数が呼ばれました

Question

単純なReactコンポーネントの簡単なテストを作成しようとしています。Jestを使用して、酵素でクリックをシミュレートするときに関数が呼び出されたことを確認します。 Jestのドキュメントによると、これを行うにはspyOnを使用できるはずです：spyOn。

しかし、これを試してみると、私は自分のスパイが定義されていないことを意味するためにTypeError: Cannot read property '_isMockFunction' of undefinedを取得し続けます。私のコードは次のようになります。

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
class App extends Component { 

    myClickFunc =() => { 
     console.log('clickity clickcty') 
    } 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro" onClick={this.myClickFunc}> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

export default App; 

と私のテストファイルに：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import { shallow, mount, render } from 'enzyme' 

describe('my sweet test',() => { 
it('clicks it',() => { 
    const spy = jest.spyOn(App, 'myClickFunc') 
    const app = shallow(<App />) 
    const p = app.find('.App-intro') 
    p.simulate('click') 
    expect(spy).toHaveBeenCalled() 
}) 
}) 

誰もが私が間違ってやっている洞察力を持っていますか？

Answer 1

ちょっとバディ私は遅く、ここで少しだが、知っているあなたは、ほぼどのようspyOn以外に何も変更せずに行われました。 スパイを使用するときは、コンポーネントプロトタイプを観察する必要があります。

スパイをクラスプロトタイプに添付し、インスタンスをレンダリング（浅いレンダリング）する順序は重要です。最初の行に

const spy = jest.spyOn(App.prototype, "myClickFn"); 
const instance = shallow(<App />); 

App.prototypeビットは、あなたが物事を動作させるために必要なものがあります。 javascript classには、new MyClass()でインスタンス化するか、MyClass.prototypeに入るまで、そのメソッドはありません。あなたの質問には、App.prototypeの方法myClickFnをスパイする必要があります。

これは、他の人がテストパスを行うために自分のアプリにプロップを渡そうとしていた人を助けてくれることを願っています。

編集： myClickFnの副作用をチェックする場合は、別のテストでそれを呼び出すことができます。

const app = shallow(<App />); 
app.instance().myClickFn() 
/* 
Now assert your function does what it is supposed to do... 
eg. 
expect(app.state("foo")).toEqual("bar"); 
*/ 

Answer 2

あなたのテストコードでは、AppをspyOn関数に渡そうとしていますが、spyOnはクラスではなくオブジェクトでのみ動作します。一般に、ここでは2つのアプローチのうちの1つを使用する必要があります：

1）Clickハンドラが、小道具として渡された関数を呼び出しているところ。クリックハンドラは、例えば、コンポーネントにいくつかの状態を設定

describe('my sweet test',() => { 
it('clicks it',() => { 
    const spy = jest.fn(); 
    const app = shallow(<App someCallback={spy} />) 
    const p = app.find('.App-intro') 
    p.simulate('click') 
    expect(spy).toHaveBeenCalled() 
}) 
}) 

2）：あなたは今、コンポーネントへの小道具としてスパイ機能を渡し、それが呼ばれると主張することができます

class App extends Component { 

    myClickFunc =() => { 
     console.log('clickity clickcty'); 
     this.props.someCallback(); 
    } 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro" onClick={this.myClickFunc}> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

class App extends Component { 
    state = { 
     aProperty: 'first' 
    } 

    myClickFunc =() => { 
     console.log('clickity clickcty'); 
     this.setState({ 
      aProperty: 'second' 
     }); 
    } 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro" onClick={this.myClickFunc}> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

あなたは今、あなたはほとんどそこにいる、すなわち

describe('my sweet test',() => { 
it('clicks it',() => { 
    const app = shallow(<App />) 
    const p = app.find('.App-intro') 
    p.simulate('click') 
    expect(app.state('aProperty')).toEqual('second'); 
}) 
}) 

Answer 3

、コンポーネントの状態に関するアサーションを行うことができます。私は@Alex Youngにそれについての小道具の使用に関する答えに同意しますが、方法を偵察する前にinstanceへの参照が必要です。

describe('my sweet test',() => { 
it('clicks it',() => { 
    const app = shallow(<App />) 
    const instance = app.instance() 
    const spy = jest.spyOn(instance, 'myClickFunc') 

    instance.forceUpdate();  

    const p = app.find('.App-intro') 
    p.simulate('click') 
    expect(spy).toHaveBeenCalled() 
}) 
}) 

ドキュメント： http://airbnb.io/enzyme/docs/api/ShallowWrapper/instance.html