如何使用Enzyme和Jest动态测试向节点添加本机事件onkeydown函数

时间:2019-03-26 03:14:22

标签: reactjs jestjs enzyme

我正在尝试进行动态测试,以便在for循环中向元素节点动态添加onkeydown函数。

以下是相关代码:

export class Tab extends React.Component {
  constructor(props) {
    super(props);
    this.tabInput = null;

    this.setTabInputRef = element => {
      this.tabInput = element;
    };

    this.handleKeyDown = (event, self) => {
      if (event.key === 'ArrowRight' || event.key === 'Right') {
        if (self.nextSibling) {
          self.nextSibling.focus();
        } else {
          self.parentNode.firstChild.focus();
        }
      } else if (event.key === 'ArrowLeft' || event.key === 'Left') {
        if (self.previousSibling) {
          self.previousSibling.focus();
        } else {
          self.parentNode.lastChild.focus();
        }
      }
    };
  }

  componentDidMount() {
    const node = this.tabInput;

    for (let i = 0; i < node.childNodes.length; i++) {
      const self = node.childNodes[i];
      self.onkeydown = event => {
         this.handleKeyDown(event, self);
      };
      self.onkeydown = event => {
        this.handleKeyDown(event, self);
      };
    }
  }


  render() {

    return (
        <ul ref={this.setTabInputRef}>
          { this.props.children }
        </ul>
    );

使用酶进行测试时,如何测试功能对self.onkeydown的分配?这是我尝试过的:

it('should set onkeydown on each child element', () => {
    const tree = mount(<Tab><div id="hello-div"> hello </div></Tab>);
    const instance = tree.find('#hello-div').instance();
    instance.onkeydown = jest.fn(event => jest.fn(event, instance));
})

我还附上了我的测试报道的屏幕截图。 test coverage for self.onkeydown assignment

0 个答案:

没有答案