Как протестировать динамическое добавление нативной функции onkeydown к узлу с помощью Enzyme и Jest - PullRequest
0 голосов
/ 26 марта 2019

Я пытаюсь проверить динамически добавление функции onkeydown к элементам узла динамически в цикле for.

Вот соответствующий код:

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>
    );

При тестировании с помощью Enzyme, какможно проверить назначение функции для 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...