如何在测试（Lit）Web 组件之前等待异步 connectedCallback 完成？

Question

我现在正在使用 Lit Framework，但我认为这种类型的事情也会发生在常规 Web 组件上。

我的

connectedCallback

是

async

，但是，有了Lit

fixture

，我不认为它等到

connectedCallback

完成，所以我的状态变化发生在测试完成后。

作为解决方法，我在我的

this.dispatchEvent(new Event('cc-completed')

末尾放了一个

connectedCallback

。

@customElement('my-lit-element')
export default class MyLitElement extends LitElement {
  override async connectedCallback() {
    super.connectedCallback();
    await this.loadStuff(); // Also changes state
    this.dispatchEvent(new Event('cc-completed'));
  }
}

然后：

describe('My Lit Element Tests', () => {
  it('My Lit Element Test #1', async () => {
    const myLitElement: MyLitElement= await fixture(html`
      <my-lit-element
        .prop=${"prop"}
      ></my-lit-element>
    `);

    myLitElement.addEventListener('cc-completed', () => {
      // asserts
    });
  }).timeout(5000);
});

但是，这仅适用于调试和断点，否则测试将完成并且回调将被挂起。

这样做的正确方法是什么？

Answer 1

对于像设置响应式属性这样的同步更新请求，做

await myLitElement.updateComplete

就足够了。

但是如果在

connectedCallback

中导致更新的事情是异步的，那么唯一的方法就是轮询您正在寻找的结果。

Open-WC 在

@open-wc/testing

包中有一些测试实用程序。

waitUntil

允许您提供通用谓词函数和一些选项，如间隔和超时。

oneEvent

让您等待事件的触发，就像您在第二个示例中触发的事件一样。

您在测试中的一个可能的解决方案，您还可以将超时作为

options

参数传递给

waitUntil

：

it('My Lit Element Test #1', async () => {
  const myLitElement: MyLitElement= await fixture(html`
    <my-lit-element
      .prop=${"prop"}
    ></my-lit-element>
  `);

  await waitUntil(
    () => myLitElement.shadowRoot!.querySelector('#id'),
    'Element is not ready', { timeout: 5000 }
  );

  // asserts
})