Testing Event Listeners in lifecycle events

Let's say you have a mixin that dispatches an event on firstUpdated and connectedCallback:

const mixin = superclass => class extends superclass {
  firstUpdated() {
    this.dispatchEvent(new CustomEvent('first-updated'));

  connectedCallback() {
    this.dispatchEvent(new CustomEvent('connected-callback'));

These are the suggested ways of testing these events:


Testing firstUpdated is a little tricky. As soon as you add the component to the DOM, it is executed - with an arbitrary delay depending on the work your component does see lit-element lifecycle.

To test this, you can use fixtureSync and await oneEvent to resolve the event.

it('dispatches a custom event on firstUpdated', async () => {
  const tag = class extends mixin(LitElement) {};
  const el = fixtureSync(`<${tag}></${tag}>`);
  const ev = await oneEvent(el, 'first-updated');


For connectedCallback, since this callback is fired immediately after calling fixture, you can't catch it anymore. What you can do is define a new component and test its callback function in a setTimeout.

it('test', async () => {
  const tag = defineCE(class extends mixin(LitElement) {});
  const foo = document.createElement(`${tag}`);
  setTimeout(() => foo.connectedCallback());
  const ev = await oneEvent(foo, 'connected-callback');
Last Updated: 3/30/2019, 9:59:29 AM