Javascript Jest抛出类型错误：this.inputEl.focus不是函数#1964

模具版本：

 @stencil/core@1.7.0

   "jest": "24.8.0"

笑话版：

 @stencil/core@1.7.0

   "jest": "24.8.0"

当前行为：

 @stencil/core@1.7.0

   "jest": "24.8.0"

我试图将输入元素集中在按钮单击上。 这很好，但是当尝试使用

npm test

测试功能时，

jest

抛出

TypeError

说焦点不是函数。

对于所有手动事件调用，例如

单击

，

模糊

，

焦点

，都会重复此错误。 因此测试用例没有通过

预期行为：

 @stencil/core@1.7.0

   "jest": "24.8.0"

它不应该抛出错误

复制步骤： 我提供了一个相关的演示代码用于检查。 相关代码：

 @stencil/core@1.7.0

   "jest": "24.8.0"

演示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>
    );
  }
}

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

---

任何帮助都将不胜感激

我通过模拟输入元素的

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

从'@stencil/core/testing'导入{newSpecPage}；
从“./demo btn”导入{DemoBtnComponent}；
描述（'my-component'，（）=>{
它（'应将输入el集中在btn单击上'，异步（）=>{
const page=等待新闻页面({
组件：[DemoBtnComponent]，
html:“”，
});
/**模拟输入元素焦点函数*/
const inputEl=page.root.querySelector（'input'）；
inputEl.focus=jest.fn（）；
const btn=page.root.querySelector（'按钮'）
点击（）；
等待page.waitForChanges（）；
expect（true）.toBeTruthy（）；
});
});

结束这个问题