Jest.js 如何在测试(Lit)Web组件之前等待异步connectedCallback完成？

kiz8lqtg 于 2023-03-06 发布在 Jest

关注(0)|答案(1)|浏览(188)

我现在使用的是Lit Framework，但我认为这种情况也会发生在常规的Web组件上。
我的connectedCallback是async，但是，对于Lit fixture，我认为它不会等到connectedCallback完成，所以我的状态更改发生在测试完成之后。
作为一种变通方法，我在connectedCallback的末尾放了一个this.dispatchEvent(new Event('cc-completed')。

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

然后：

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

然而，这只适用于调试和断点，因为否则测试将结束，回调将被挂起。
做这件事的正确方法是什么？

jestjs

来源：https://stackoverflow.com/questions/75608529/how-to-wait-for-an-async-connectedcallback-to-finish-before-testing-the-lit-we

1条答案

按热度按时间

31moq8wy1#

对于同步更新请求（如设置React式属性），执行await myLitElement.updateComplete就足够了。
但是，如果在connectedCallback中引起更新的是异步的，那么唯一的方法就是轮询您要查找的某个结果。
Open-WC在@open-wc/testing包中提供了一些测试工具。waitUntil允许您提供一个通用 predicate 函数和一些选项，如interval和timeout。oneEvent允许您等待事件的触发，如第二个示例中触发的事件。
在测试中，一种可能的解决方案是，您还可以将超时作为waitUntil的options参数传递：

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

赞(0）回复(0）举报 2023-03-06

我来回答

Jest.js 如何在测试(Lit)Web组件之前等待异步connectedCallback完成？

1条答案

相关问题

热门标签

最新问答