ComponentDidMount内の関数をスタブする方法は、最初にコンポーネントをレンダリングする必要がありますか? -- javascript フィールド と unit-testing フィールド と reactjs フィールド 関連 問題

How to stub a function inside ComponentDidMount and requires to render the component first?












3
vote

問題

日本語

以下のように反応成分をテストしようとしています。

component.jsx:

<事前> <コード> return React.createClass({ render: function(){ return ( <div id='model' ref = 'model' > <div className = 'container'> {container} </div> </div> ); } componentDidMount: function () { this.props.model.getNext().then(doSth()); React.findDOMNode(this.refs.model).addEventListener('focus', this.scroll); }, scroll: function() { // do scrolling. } });

だから私はcomponentdidmount内のロジックをテストしたいと思います。これは、addEventListener()をスタブする必要がありました。 問題は: スタブをスタブするにはRefsプロパティでDOMNodeを見つけるためにレンダリングする必要がありますが、ComponentDIDMountはレンダリングの直後に呼び出されます。そのため、スタブはその場合は機能しません。

例:単位テストで: <事前> <コード> var eventFunction = {}; mockEventListener: function(event, callback){ eventFunction[event] = callback; } var renderer = React.addons.TestUtils.renderIntoDocument(component, props); sinon.sandbox.create().stub(React.findDOMNode(renderer.refs.model), 'addEventListener', mockEventListener); eventFunction.focus();

これは、ComponentDidMountが実行された後にスタブが呼び出されるため、eventfuncy関数にプロパティが含まれていないので、それが行われるようにしてください。 このユニットを適切にテストするためのレンダリング前またはその他のアプローチの前に関数をスタブする方法はありますか?

英語

I'm trying to unit test a react component as below:

Component.jsx:

return React.createClass({     render: function(){         return (                 <div id='model' ref = 'model' >                     <div className = 'container'>                         {container}                     </div>                 </div>             );     }      componentDidMount: function () {         this.props.model.getNext().then(doSth());          React.findDOMNode(this.refs.model).addEventListener('focus', this.scroll);     },      scroll: function() {         // do scrolling.     } }); 

So I wanted to test the logic inside componentDidMount, which requires to stub the addEventListener(). The problem is: to stub it I need to render to get find the domnode by the refs property, but the componentDidMount will be called right after the render, so the stub doesn't work on that case.

Eg: in the unit test:

var eventFunction = {}; mockEventListener: function(event, callback){     eventFunction[event] = callback; }  var renderer = React.addons.TestUtils.renderIntoDocument(component, props); sinon.sandbox.create().stub(React.findDOMNode(renderer.refs.model), 'addEventListener', mockEventListener); eventFunction.focus(); 

This will complain that the eventFunction doesn't have any property as the stub is called after componentDidMount being executed so it's nevered get stubed. Is there any way to stub the function before the render or any other approach to test this unit properly?

</div
        

回答リスト


関連する質問

0  Charts RecativeJSを使用してレンダリングのAPIからデータオブジェクトを表示するためのFor Loopを作成します。  ( Make a for loop to show data object from api in render using charts reactjs ) 
チャートのAPIからデータを表示する必要があります( HTTPS) ://canvasjs.com/react-charts/chart-index-data-label/ ) これは私のAPIの前部: <事前> <コード> //API Gains stat...

1  ReactJS-BootstrapフォームとH1タグを並べて配置する方法  ( How can i put a reactjs bootstrap form and h1 tag side by side ) 
私は私のフォームグループと私のh1タグを横々と横々としたいです。私はディスプレイを使ってみました:インラインブロックと他のさまざまなもののものですが運がなかった。これが私の.cssコードです: <事前> <コード> .testingForm { max-w...

0  クラスベースのAXIOS要求をフックベースのコードに統合する  ( Integrating class based axios request to the hook based code ) 
このクラスベースのAXIOSリクエストをJSONファイルからデータを取得する他のフックベースのコードに統合する方法基本的に私はデータソースの場所をAXIOS GETリクエストと置き換えたいです。ありがとう。 <事前> <コード> componentDidMou...

0  Mock Dispatch関数は呼び出されません  ( Mock dispatch function is not called ) 
非同期アクション作成者のテストを書いていますが、「推定モック機能が「と呼ばれている」と述べた問題に遭遇しました: <事前> <コード> [{"type": "GET_LOGIN_SUCCESS", "value": true}] しかしそれは呼ばれなかっ...

84  React Statelessコンポーネントのイベントハンドラ  ( Event handlers in react stateless components ) 
React Statelessコンポーネントでイベントハンドラを作成するための最適な方法を見つけようとしています。私はこのようなことができる: <事前> <コード> const myComponent = (props) => { const myH...

0  反応 - 両親にアクセスする子供たちは早すぎる?  ( React children accessing parents state too early ) 
子からapp.jsにコールバックを使用する場合、app.jsのコールバック関数は要素の状態を設定します。 同じ子関数で、次の行で、関数はこの状態にアクセスします。これはPROPとして渡されます。 この次の行がすでに更新された状態で実行されていることを確認する方...

0  共有可能なパネルのURLを反応させる  ( React sharable panel url ) 
次のスニペットを検討してください。今すぐボタンをクリックするde 'IE indexroot 私が達成したいのは: "href="http://localhost:3000/de/?open" http:// localhost:3000 / de /? ...

2  Next.jsとTypeScriptでReact StyleGuidistを設定する  ( Setting up react styleguidist with next js and typescript ) 
私はnext.jsとtypescriptでReact Styleguidistをセットアップしようとしていますが、問題に歩き続けます。 My現在のstyleguide.config.jsは次のようになります: <事前> <コード> const path = r...

1  Vanilla JavaScriptを使用してReact App DOMに追加する方法  ( How to append to a react app dom using vanilla javascript ) 
私は私が任意のウェブサイトからテキストを強調することを可能にするクロム拡張を作成しています。 あなたにアイデアを与えるために <事前> <コード> var newDom = document.body.innerHTML; var selection = wi...

0  Reactでフォームを送信する方法  ( How to submit a form in react ) 
反応成分のフェッチで反応成分にはない形式を送ることができるかどうかを知りたいのです。 <事前> <コード> <form action="json.bc" class="form_search" method="post"> <input type="hid...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有