2016-12-19 14 views
3

grommetMenu成分をレンダリングする成分をテストしようとしています。グロメットMenuコンポーネントは、ドキュメントの最上位にメニューをレンダリングします。bodyの子として挿入されます。したがって、ラッパーの範囲外にレンダリングされます。私はdocument.body.innerHTML(jsdomの文献を参照してください)とそれを見つけることができますが、私はそれを酵素を使用して対話したいです。どんな勧告?トップレベルにレンダリングする酵素成分を試験する方法

私のテスト:

const wrapper = mount(
    <MyComponent checkThis={checkThisSpy} /> 
); 
wrapper.find('.spec-menu').simulate('click'); 
console.log(document.body.innerHTML); // Shows the absolute menu inserted into the body 

このdocument.body.insertBefore(drop.container, document.body.firstChild);んグロメットで行。 https://github.com/grommet/grommet/blob/master/src/js/utils/Drop.js#L197

これを処理するための最良の方法についてのガイダンスを探しています。ありがとう!

+0

グロメットコンポーネントによってレンダリングされるメニューは、別の子コンポーネントですか?そうでない場合は、DOMの権利にちょうど追加されている要素ですか?この場合、chai-domのようなものを使って内部のhtml要素が偽の文書要素に存在することを確認することができると思います。 http://chaijs.com/plugins/chai-dom/ – therewillbecode

答えて

1

最終的に、我々は酵素自体を用いて成分を試験する方法を見つけることができなかった。 domを提供するためにjsdomを使用しているので、documentはグローバルに利用可能です。私たちは、

expect(document.getElementsByClassName('my-top-level')).to.have.length(1) 

通常のDOM APIは、私たちが望むすべてのものをテストするのに十分であることがほんの少しclunkierだように見えるいくつかの期待を書いてしまいました。

関連する問題