我正在尝试使用jest为我的lit-html元素创建一个单元测试，我想检查一下click事件是否按预期工作。
测试单击时从活动变为禁用的事件。

// my-lit-html-toggle.ts
const TAG = 'my-lit-html-toggle';

@customElement(TAG)
export class My-lit-htmToggle extends LitElement {
  @property({ type: Boolean })
  public active = false;

  @property({ type: Boolean })
  public disabled = false;

  public static styles = unsafeCSS(toggleSwitchStyles);

  public render(): TemplateResult {
    const classes = {
      active: this.active,
      disabled: this.disabled,
    };
    return html`
      <div class="toggle ${classMap(classes)}" @click=${this.toggleActive}>
        <div class="toggle-switch"></div>
        <div class="toggle-handle"></div>
      </div>
    `;
  }

  private toggleActive() {
    const onToggle = new CustomEvent<ToggleSwitchEvent>('onToggle', {
      detail: {
        active: (this.active = !this.active),
      },
    });
    this.dispatchEvent(onToggle);
  }
}

// Test JEST
import { html, render } from 'lit'; 

describe('Given my-lit-html-toggle', () => {

    it('Should switch from active to disabled', async function () {
      const switchHandler = jest.fn();

      render(html`<my-lit-html-toggle active .click="${switchHandler}" ></my-lit-html-toggle>`, document.body);
      await Promise.resolve();
      document.body.querySelector(TAGNAME)?.click()
      await waitFor(() => expect(switchHandler).toBeCalledTimes(1));
    });
})

已调用单击事件，但类未更改。Jest错误：

expect(element).toHaveClass("disbled")

    Expected the element to have class:
      disbled
    Received:
      toggle-switch active

      38 |       );
      39 |       const cut = document.body.querySelector(TAGNAME)?.shadowRoot;
    > 40 |       expect(cut?.childNodes.item(2)).toHaveClass('disbled');
         |                                       ^
      41 |     });
      42 |