title: How to mock stencil web components by using react testing library?
body: <p>I've created a separate web component library using Stenicljs and used it in React application, While writing test cases realized that events are not working as expected. I've tried to mock the component but was not able to figure out the proper way of doing it. Definitely need some help..!</p>
  <p>stencil web component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; {
      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&lt;void&gt;;
    private onHandle = e =&gt; {
      this.stencilClick.emit(e);
    };
    private buttonId = `gt-button-${generateUniqueId()}`;
  
    render () {
      const isWrapper = this.appearance === 'wrapper';
      const classList = classnames({
        btn: true &amp;&amp; !isWrapper,
        [this.appearance]: this.appearance &amp;&amp; !isWrapper,
        [this.size]: this.size &amp;&amp; !isWrapper,
        [this.class]: this.class &amp;&amp; !isWrapper,
        bold: this.bold &amp;&amp; !isWrapper,
        wrapper: isWrapper,
        stencilInline: this.inLine,
      });
      const hostStyles = classnames({
        stencilInline: this.inLine
      })
      return (
        &lt;Host onClick={this.handleClick} class={hostStyles}&gt;
          &lt;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}
          &gt;
            &lt;slot&gt;&lt;/slot&gt;
          &lt;/button&gt;
        &lt;/Host&gt;
      );
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Currently, I am trying to mock the Stencil button in my react application:</p>
  <pre><code>const App = () =&gt; {
  
  
  const [btnvalue, setbtnvalue] = useState(0);
  
    const increment = () =&gt; {
      setbtnvalue(btnvalue + 1);
    };
  
    return (
      &lt;div&gt;
        &lt;StencilButton onStencilClick={increment} data-testid='click-btn'&gt;
          {btnvalue}
        &lt;/StencilButton &gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Below is my test case:</p>
  <pre><code>describe('counter test cases', () =&gt; {
    it('updated counter on click', () =&gt; {  
      const clickBtn = getByTestId('click-btn');
      fireEvent.click(clickBtn);
      console.log(clickBtn.textContent);
      expect(clickBtn.textContent).toBe('1'); 
    });
  });
  </code></pre>