反応+酵素で要素テキストを選択する方法

Question

ちょうどそれが言うこと。いくつかの例コード：

let wrapper = shallow(<div><button class='btn btn-primary'>OK</button></div>); 

const b = wrapper.find('.btn'); 

expect(b.text()).to.be.eql('OK'); // fails, 

またhtml方法は、例えば、要素の内容だけでなく、素子自体に加えて、すべての属性が返さそれは<button class='btn btn-primary'>OK</button>を与える。だから私は最悪の場合、htmlと呼ぶことができますが、正規表現ですが...

要素の内容を取得する方法があるので、私はそれを主張できます。

Answer 1

ノード（ReactElement）をshallow関数に渡していて、ReactにHTML属性classがないことを忘れないでください。 classNameを使用する必要があります。

からは、すべての属性は、キャメルケースと属性classとforあるドキュメント

に反応するDOM APIに 仕様に一致するように、それぞれ、 classNameとhtmlForです。

このテストでは、

const wrapper = shallow(<div><button className='btn btn-primary'>OK</button></div>); 
const button = wrapper.find('.btn'); 
expect(button.text()).to.be.eql('OK'); 

Answer 2

に動作しなければならない、私はルイ・barranqueiroはおそらく、あなたの根本的な質問に答えました@と思います。つまり、CSSセレクタが必要なので、classNameではなくclassを使用していたはずです。

しかし、試してみて、あなたが与えた実際の例を使用して、要素のテキストを選択する方法の疑問に答えるために：

let wrapper = shallow(<div><button class='btn btn-primary'>OK</button></div>);

はあなたがobject property selectorようなものを使用する必要があるだろう、例えば：

を

expect(wrapper.find({ class: "btn btn-primary" }).text()).to.equal('OK');

や小道具構文：

expect(wrapper.find('[class="btn btn-primary"]').text()).to.equal('OK');

（またはそれ以上明示的に）：

expect(wrapper.find('button[class="btn btn-primary"]').text()).to.equal('OK');