javascript - 在没有DOM的情况下测试图片的“ naturalHeight”

我正在编写JS测试,以检查图像的CSS类是否正确应用。该类是根据图像的naturalHeight属性计算的。但是,由于这是JS测试,因此没有DOM,因此naturalHeight在测试中始终为0。如何使用Jest和酶正确测试/模拟呢?

组件的简化版本:

class Image extends React.Component {
    public render () {
    return (
      <img 
        src={this.props.src}
        ref={el => this.imageElement = el } 
        className={ this._computeStyle() }/>
    )
  }

  private _computeStyle() {
    if (this.imageElement.naturalHeight > 100){ 
      return 'big';
    }
    return 'small'
  }
}


尝试测试:

it('has class "big" if > 100 pixels', () => {
  let wrapper = mount(<Image src={largeImage} />);
  expect(wrapper.find('img').hasClass('big')).toBe(true);
});

最佳答案

由于jsdom实际上并未呈现文档,因此通常不实现size属性,并返回固定的0。

naturalHeight的情况下,它像实际上返回到height属性的seems一样。

因此,我看到两个选择:

1.手动分配height

wrapper.find('img').node.height = 120;


2.扩展HTMLImageElement的原型:

Object.defineProperty(HTMLImageElement.prototype, 'naturalHeight', { get: () => 120 });

本文翻译自 https://stackoverflow.com/questions/46507306/

网站遵循 CC BY-SA 4.0 协议,转载或引用请注明出处。

标签 javascript reactjs enzyme jest


相关文章:

reactjs - 对于通过HTTP进行更改的客户端,如何忽略websocket事件?

css - 标题居中,位于背景底部

javascript - 如何使用Jest,Enzyme for React-Native在单元测试中模拟事件

javascript - 在JEST + ENZYME中无法达到100%的分支覆盖率

javascript - 显示此图片插件的标题

javascript - 右对齐在D3中创建的HTML表

javascript - 动态设置TextArea宽度

javascript - 使用JavaScript从外部图像获取颜色

javascript - 当登录状态为组件状态时,如何使用react-router实现与登录相关的路径?

javascript - 用酶测试React Component className