酵素/反応単位テスト

Question

私はこの反応機能UIのみのコンポーネントを持っています。これには2つの小道具が渡され、2つ目は親コンポーネントから渡される関数です。 onClickは、親コンテナコンポーネント内の関数に「代理人」を呼び出します。この親メソッドは、還元ストアへのディスパッチを行います。

import React, {Component} from 'react'; 
import PropTypes from 'prop-types'; 

const BotShowUI = ({ bot, onClick }) => { 
    return(
     <div id={bot.id} onClick={onClick}> 
      {bot.id} : {bot.text} 
     </div> 
    ) 
} 

BotShowUI.propTypes = { 
    bot: PropTypes.object.isRequired, 
    onClick: PropTypes.func.isRequired 
}; 

export default BotShowUI; 

私のテスト仕様は、ジャスミン

import React, {Component} from 'react'; 
import { mount } from 'enzyme'; 

import BotShowUI from '../botShowUI'; 

function onClickFunction(){}; 

describe('botShowUI',() => { 

    const bot = {id: 1, isDone: false, text: 'bot 123'}; 
    const expectedDivText = '1 : bot 123'; 

    const wrapper = mount(<BotShowUI bot={bot} onClick={onClickFunction} />); 

    it(' div has been rendered ',() => { 
     expect(wrapper.find('div').first()).not.toBe(null); 
    }); 

    it(' div displays the correct bot text ',() => { 
     expect(wrapper.find('div').first().text()).toEqual(expectedDivText) 
    }); 

    it(' div click event fired ',() => { 
     wrapper.simulate('click'); 
     expect(wrapper.state('onClick')).toBe(true); 
    }); 
}); 

この最後の主張は

Chrome 57.0.2987 (Windows 10 0.0.0) botShowUI div click event fired FAILED 
     TypeError: Cannot read property 'onClick' of null 
      at ReactWrapper.state (webpack:///~/enzyme/build/ReactWrapper.js:825:24 <- tests.webpack.js:26303:25) 
      at Object.<anonymous> (webpack:///app/react/components/bots/_tests/botShowUI.spec.js:25:23 <- tests.webpack.js:25415:25) 

wrapper.simulate('click');作品で失敗を使用していますが、次の行が主張する正しい方法です何 を失敗している、ありますクリックが発生したとしますか？ 状態を使用する代わりにラッパーの小道具/子供に落とす必要がありますか？

私は何らかの方法で親コンテナをテストしようとしていません、2つは隔離されています。 このテストはこのUIコンポーネントにのみ関係します。

Answer 1

まず、onClickはオン状態ではなく、小道具であるため、wrapper.props('onClick')でアクセスする必要があります。

第2に、onClickが処理されたかどうかをテストするには、空の関数ではなくスパイを使用することです。スパイを使用したくない場合でも、スパイをやりなおすことはできますが、行った方法ではありません。あなたが興味があるなら、私はそれのために擬似コードを投稿することもできます。しかし、スパイを使うことに戻ってくると、onClickの小道具としてスパイを使うことができます。以下はそのコードです。私は手書きで書いていますので、構文エラーがないか確認してください。しかし、何をする必要があるのか​​を知るべきです。アビシェークの答えに基づいて

it('should call the onClick handler on click',() => { 
    const onClickFunction = sinon.spy() 
    wrapper = mount(<BotShowUI bot={bot} onClick={onClickFunction} />) 
    wrapper.simulate('click'); 
    expect(onClickFunction).toHaveBeenCalled(); 
}) 

Answer 2

ここジャスミン

it(' div click event fired ',() => { 

    let onClickFunction_spy = jasmine.createSpy('onClickFunction'); 
    const wrapper = mount(<BotShowUI bot={bot} onClick={onClickFunction_spy} />); 
    wrapper.simulate('click'); 
    expect(onClickFunction_spy).toHaveBeenCalled(); 
}); 

のための私の解決策は、これは誰にもお役に立てば幸いです。