7

「もっと読む」/「もっと読む」機能でマークアップの長いブロックを装飾する非常に単純な React.js コンポーネントがあります。

Jest が動作するいくつかのテストがありますが、DOM 要素の高さが元のコンテンツのサイズまで増加していると断言できません。

Jest テスト環境では、getDOMNode().scrollHeight を呼び出しても何も返されないようです。

コードと失敗したテストを含むリポジトリへのリンクは次のとおりです: https://github.com/mguterl/react-jest-dom-question

以下は、同じ問題を示すコードとテストの簡略版です。

簡素化されたコード

var ReadMore = React.createClass({
  getInitialState: function() {
    return {
      style: {
        height: '0px'
      }
    }
  },

  render: function() {
    return (
      <div>
        <div ref='content' className='read-more__content' style={this.state.style} dangerouslySetInnerHTML={{__html: this.props.content}} />
        <a onClick={this.expand} href='#'>Expand</a>
      </div>
    );
  },

  expand: function() {
    // This call to scrollHeight doesn't return anything when testing.
    var height = this.refs.content.getDOMNode().scrollHeight;

    this.setState({
      style: {
        height: height
      }
    });
  }
});

テスト

jest.dontMock('../ReadMore');

global.React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var ReadMore = require('../ReadMore');

describe('ReadMore', function() {
  var readMore;
  var content;
  var link;

  beforeEach(function() {
    readMore = TestUtils.renderIntoDocument(
      <ReadMore collapsedHeight='0px' content='<p>Hello World</p>' />
    );

    content = TestUtils.findRenderedDOMComponentWithClass(
      readMore, 'read-more__content');

    link = TestUtils.findRenderedDOMComponentWithTag(
      readMore, 'a');
  });

  it('starts off collapsed', function() {
    expect(content.getDOMNode().getAttribute('style')).toEqual('height:0px;');
  });

  it('expands the height to fit the content', function() {
    TestUtils.Simulate.click(link);
    expect(content.getDOMNode().getAttribute('style')).toEqual('height:100px;');
  });
});
4

1 に答える 1

5

Jest は「(jsdom を介して) 偽の DOM 実装を使用してテストを実行し、コマンド ラインでテストを実行できるようにします」( http://facebook.github.io/jest/ )。

divの高さを計算するためにレンダリングエンジンに対して実行されていないため、要素の高さのようなものが設定されるとは思いません。

いずれかまたは両方の状態 (「read-more」/「read-less」) で div にマーカー スタイル クラスを設定することをお勧めします。次に、テストでクラスの有無をアサートできます。

また、「続きを読む」モードでスタイル属性をまったく設定しない場合は、囲んでいる div をレンダリングして、内側の div を完全に表示する必要があります (内側の div 全体を表示しようとしている場合を除きます)。this.props.collapsedHeightでは、style 属性の値が「readless」モードであり、「readmore」モードで設定されていないことをテストするだけで十分ではないでしょうか?

于 2015-02-08T19:39:16.207 に答える