web-dev-qa-db-ja.com

JestやEnzymeを使用して、Reactコンポーネントにネストされた要素の属性を取得するにはどうすればよいですか？

Reactアプリで画像が適切にロードされたかどうかを確認するためにテストしたいです。ネストされたsrc要素のimg属性を確認することにしましたReactコンポーネント。Jestテストフレームワークと、必要に応じてEnzymeテストユーティリティを使用したい。

Object.keysの浅いReactテストコンポーネント、私は次の解決策を思い付くことができました。私が不確かな行はアスタリスクで示されています。

import React     from 'react';
import {shallow} from 'enzyme';
import App       from './App';

it('should have the logo image', () => {
  const app = shallow(<App />);
  const img = app.find('img');
  const src = img.node.props.src; // ******
  expect(src).toBe('logo.svg');
});

この解決策は機能しますが機能しますが、少し複雑で（ラッパーのプロパティのプロパティが必要です）、やや不明瞭です（私はできるこのオンラインの明確な指示を簡単に見つけることはできません）。だから、これはこれを行うための正しい/最も簡単な方法ですか？

  • もしそうなら、ドキュメントはどこにありますか？
  • そうでない場合、他にどのようにすればよいですか/できますか？例えばEnzymeに既製のgetAttributeまたはretrievePropメソッドなどがありますか？酵素の代わりに何か他のものを使用してこれを行うより良い方法はありますか？ react-addons-test-utils？

この質問 about React要素属性は、レンダリングされた属性をアサートすることに関するドキュメントを見つけるのが難しいというポスターがそこにあるにもかかわらず、私にはまったく答えていないようです値。他の多くの質問（例 here 、 here および here ）React/Jest/Enzymeを処理しますが、取得は処理しません属性値。

javascriptreactjsjestjsenzyme
13
Andrew Willems

掘り下げた後、私は次を見つけました。質問に示されている行：

const src = img.node.props.src;

次のように簡略化できます。

const src = img.prop('src');

ドキュメントは here にあります。

誰かがこれを行う非酵素の方法を知っていれば、私はまだそれについて聞いてみたいです。

24
Andrew Willems

React テストユーティリティ ：

it('should have the logo image', () => 
  const app = TestUtils.renderIntoDocument(<App/>);
  var image = TestUtils.findRenderedDOMComponentWithTag(app, 'img');
  expect(image.getDOMNode().getAttribute('src')).toEqual('logo.svg');
});

酵素テストはずっときれいに見えます。

7
Yadhu Kiran

私にとっては、以下のように機能しました

expect(companySelect.find('input').props()["disabled"]).toBe(true)

props()は、セレクターのすべての属性を持つオブジェクトを返し、オブジェクトとして参照できます。

これも役立つことを願っています。..

https://airbnb.io/enzyme/docs/api/ReactWrapper/props.html

5
Dinuka De Silva

.nodeが機能しない

  const src = img.getElement().props.src;
1
D V Yogesh

私にとってこれはうまくいきました

expect(component.find('button').props().disabled).toBeTruthy();
0
SanS