Question

我有一个React组件，它使用一个回调引用来存储对DOM元素的引用，以便它可以动态添加一个样式。我想做一个测试来检查是否添加了一个样式。

我该怎么做？我可以看到设置样式的方法被调用并且似乎按预期工作（因为它记录了一个数字）。但是当我记录wrapper.debug（）时，我看不到任何样式属性。

为我的第二个it（）函数添加测试的正确方法是什么？

import {mount} from 'enzyme';
import React from 'react';
import TestThenRemove from 'test-then-remove';

let wrapper;

describe('Testing ref to DOM element', () => {
  it('calls a method for setting height dynamically when the component mounts', () => {
    jest.spyOn(TestThenRemove.prototype, 'addStyleToElement');
    wrapper = mount(<TestThenRemove />);
    expect(
      TestThenRemove.prototype.addStyleToElement
    ).toHaveBeenCalled(); // PASS!!!!
    console.log(wrapper.debug()); // Indicates that no style has been added
  }); 

  it('adds a style with height value to the dom node', () => {
    // expect the node to have an attribute of 'style'
    // expect the style to be 'height'
  });
});

为Jest和Enzyme编写的测试。

{{1}}

Answer 1

手动更新React中的元素并不是一个好主意 - 除其他原因外，因为如果重新渲染组件，更改将被覆盖。相反，请尝试将样式保存到state并将其设置为render()：

class DomStyleTest extends React.Component {
  state = { height: undefined };
  ...
  addStyleToElement() {
    if (this.myElement) {
      this.setState({ height: window.innerHeight - 
        this.myElement.getBoundingClientRect().top });
    }
  }
  ...
  render() {
    // relevant part:
    <div
      ref={this.getRefToElement}
      className="widget"
      style={ this.state.height && { height: `${this.state.height}px` } }
    >
  }
}

如何测试React组件是否向元素添加样式属性

1 个答案: