web-dev-qa-db-ja.com

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

まさにそれが言うこと。いくつかのサンプルコード：

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を呼び出して正規表現できると思いますが、...

要素のコンテンツを取得するだけの方法があるので、私はそれを主張することができます。

reactjsenzyme
18
Kevin

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

From React documentation

すべての属性はキャメルケースであり、属性classおよびforは、それぞれclassNameおよびhtmlForであり、DOM API仕様に一致します。

このテストは機能するはずです

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

"includes text"を探しているときにこれを見つけたら、試してください：

it('should show correct text', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.text().includes('my text')).toBe(true);
});
12
Nelu

@ louis-barranqueiroがおそらくあなたの根底にある質問に答えていると思います。つまり、CSSセレクターが必要なので、classNameではなくclassを使用する必要がありました。

ただし、指定した実際の例を使用して要素のテキストを選択する方法の質問に答えるには、次のようにします。

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

オブジェクトプロパティセレクター のようなものを使用する必要があります。例：

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

またはprop構文：

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

（またはさらに明示的に）：

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

3
eddies