用Jest测试React元素的高度

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个非常简单的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;');
  });
});

回答：

Jest“使用伪造的DOM实现（通过jsdom）运行测试，以便您的测试可以在命令行上运行”（http://facebook.github.io/jest/）。

我不希望设置像元素高度这样的东西，因为它不会在渲染引擎上运行以计算出任何div的高度。

我建议在div上以一种状态或两种状态（“ read-more” /“ read-less”）设置标记样式类。然后，您的测试可以断言某个类的存在与否。

另外-

如果您根本没有在“阅读更多”模式下设置样式属性，则应将封闭的div呈现为完全显示内部div（除非您不只是尝试显示整个内部div）。因此，测试样式属性this.props.collapsedHeight在“读少”模式下是否具有值并且未在“读更多”模式下进行设置是否足够？

以上是 用Jest测试React元素的高度 的全部内容， 来源链接： utcz.com/qa/405727.html

回到顶部