Бросок шумихи TypeError: this.inputEl.focus не является функцией # 1964 - PullRequest
Новая
       27

Бросок шумихи TypeError: this.inputEl.focus не является функцией # 1964

4 голосов
/ 21 октября 2019

Версия трафарета: 

 @stencil/core@1.7.0

Версия Jest: 

   "jest": "24.8.0"

Текущее поведение:

Я пытаюсь сфокусировать элемент ввода на нажатии кнопки. Это работает нормально, однако при попытке проверить функциональность с помощью npm test, jest выдает TypeError, говоря, что focus не является функцией.

Эта ошибка повторяется для всехручное событие вызывается как click, blur, focus. Следовательно, контрольные примеры не проходят.

Ожидаемое поведение:

Не должно выдавать ошибку.

Шаги для воспроизведения: Я предоставляю соответствующий демонстрационный код для проверки. Связанный код:

demo-btn.tsx 
import { Component, h, Element } from '@stencil/core';

@Component({
  tag: 'demo-btn',
  styleUrl: 'demo-btn.css',
  shadow: true
})
export class DemoBtnComponent {
  @Element() el!: HTMLElement;
  private inputEl?: HTMLElement;

  onClick = () => {
    if (this.inputEl) {
      this.inputEl.focus();
    }
  }

  render() {
    return (
      <div class="input-container">
        <input ref={el => this.inputEl = el} type="text" />
        <button onClick={this.onClick}>
          Click Me
      </button>
      </div>
    );
  }
}
demo-btn.spec.tsx 
import { newSpecPage } from '@stencil/core/testing';
import { DemoBtnComponent } from './demo-btn';

describe('my-component', () => {
  it('should focus input el on btn click', async ()=> {
    const page = await newSpecPage({
      components: [DemoBtnComponent],
      html: '<demo-btn></demo-btn>',
    });

    const btn = page.root.shadowRoot.querySelector('button')
    btn.click(); // Throws error after this line
    await page.waitForChanges();
    expect(true).toBeTruthy(); // For sake of completion
  });
});

Любая помощь будет принята с благодарностью.

1 Ответ

1 голос
/ 23 октября 2019

Я решил эту проблему путем насмешки focus элемента ввода. Ниже приведен код, который я опробовал: 

import { newSpecPage } from '@stencil/core/testing';
import { DemoBtnComponent } from './demo-btn';

describe('my-component', () => {
  it('should focus input el on btn click', async ()=> {
    const page = await newSpecPage({
      components: [DemoBtnComponent],
      html: '<demo-btn></demo-btn>',
    });

    /** Mock Input Elements focus function */
    const inputEl = page.root.querySelector('input');
    inputEl.focus = jest.fn();


    const btn = page.root.querySelector('button')
    btn.click();
    await page.waitForChanges();
    expect(true).toBeTruthy();
  });
});

Закрытие этой проблемы.

...