如何使用反应测试库模拟模板 Web 组件？

Question

我使用 Stencljs 创建了一个单独的 Web 组件库，并在 React 应用程序中使用它，在编写测试用例时意识到事件没有按预期工作。 我试图模拟该组件，但无法找出正确的方法。 绝对需要一些帮助..！

模板网络组件：

 import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core'; import { ButtonAppearance, ButtonSize, ButtonType } from '../types'; import classnames from 'classnames'; import { generateUniqueId } from '../../utils/utils'; @Component({ tag: 'stencil-button', styleUrl: 'stencil-button.scss', shadow: true, }) export class StencilButton implements ComponentInterface { @Element() el!: HTMLElement; @Prop({ attribute: 'autofocus' }) autoFocus?: boolean; @Prop({ mutable: true }) value: string; @Prop() disabled?: boolean; @Prop() name?: string; @Prop() form?: string; @Prop() stencilHidden?: boolean; @Prop() type?: ButtonType = 'button'; @Prop() class: string; @Prop() appearance: ButtonAppearance; @Prop() size: ButtonSize; @Prop() bold: boolean; @Prop() stencilId: any; @Prop() inLine: boolean; private handleClick = (e: Event) => { if (this.disabled) { e.preventDefault(); e.stopPropagation(); } const form = this.el.closest('form'); if (form) { e.preventDefault(); const dummyButton = document.createElement('button'); dummyButton.type = this.type; dummyButton.style.display = 'none'; dummyButton.name = 'dummy-button'; form.appendChild(dummyButton); dummyButton.click(); dummyButton.remove(); } }; @Event() stencilClick!: EventEmitter<void>; private onHandle = e => { this.stencilClick.emit(e); }; private buttonId = `gt-button-${generateUniqueId()}`; render () { const isWrapper = this.appearance === 'wrapper'; const classList = classnames({ btn: true && !isWrapper, [this.appearance]: this.appearance && !isWrapper, [this.size]: this.size && !isWrapper, [this.class]: this.class && !isWrapper, bold: this.bold && !isWrapper, wrapper: isWrapper, stencilInline: this.inLine, }); const hostStyles = classnames({ stencilInline: this.inLine }) return ( <Host onClick={this.handleClick} class={hostStyles}> <button class={classList} id={this.stencilId ? this.stencilId : this.buttonId} onClick={this.onHandle} autoFocus={this.autoFocus} hidden={this.stencilHidden} disabled={this.disabled} name={this.name} type={this.type} form={this.form} > <slot></slot> </button> </Host> ); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

目前，我正在尝试在我的 React 应用程序中模拟 Stencil 按钮：

const App = () => {


const [btnvalue, setbtnvalue] = useState(0);

  const increment = () => {
    setbtnvalue(btnvalue + 1);
  };

  return (
    <div>
      <StencilButton onStencilClick={increment} data-testid='click-btn'>
        {btnvalue}
      </StencilButton >
    </div>
  );
};

下面是我的测试用例：

describe('counter test cases', () => {
  it('updated counter on click', () => {  
    const clickBtn = getByTestId('click-btn');
    fireEvent.click(clickBtn);
    console.log(clickBtn.textContent);
    expect(clickBtn.textContent).toBe('1'); 
  });
});

Answer 1

我最近遇到了类似的问题。 发现这个堆栈溢出希望得到帮助。 不确定您在技术上是否遇到了与我相同的问题，但是由于 Stencil slack 帐户的帮助，我被解锁了。

就我而言，我需要像在 index.html 中一样在我的测试文件中注册组件。

例子：

defineCustomElements(window);

然后我只是等待组件具有水合类：

await waitFor(() => {
      expect(filter).toHaveClass('hydrated');
});

Answer 2

终于能够找到解决此问题的方法。

 import StencilButton from 'stencil-components'; jest.mock('stencil-components', () => ({ StencilButton: (props) => { return ( <button {...props} /> ); }, }));