How to test event and style unsafecss in lit-html using jest and jsdom

Question

I'm trying to create a unit test for my lit-html element using jest. I want to check if the click event is working as expected.

To test an event that changes from active to disable when clicked.

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

The click event was called but the class did not changed. Jest error:

    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 |

Answer 1

After investigation. The describe method within jest is wrong. This code will never trigger a event within the my-lit-html-toggle.ts because jest do not know what .click is. The active and inactive state is set after an event and not as attribute.

Incorrect way

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

Correct solution use @click=${(e: CustomEvent) => onclick(e.detail)}

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

   render(html`<my-lit-html-toggle @click=${(e: CustomEvent) => onclick(e.detail)}>
              </my-lit-html-toggle>`, document.body);
   await Promise.resolve();

  document.body.querySelector(TAGNAME)?.click()
  await waitFor(() => expect(onclick).toBeCalledTimes(1));
});