somone 可以帮助编写测试用例以在 StencilJs 中成功销毁组件吗？答案

【问题标题】：Can somone help to write test-case for successful component destruction in StencilJs?somone 可以帮助编写测试用例以在 StencilJs 中成功销毁组件吗？
【发布时间】：2022-07-21 02:49:28
【问题描述】：

我正在为 SentcilJs 组件编写单元测试用例。

  it('render component-name component', async () => {
    const page = await newSpecPage({
      components: [componentName],
      html: `<component-name model-id="${Model.id}"></component-name>`,
    });
    page.rootInstance.Data = {
      Model: [Model],
      Value: [Value],
      Status: []
    }
    page.rootInstance.tableModel = tableModel;
    page.rootInstance.tableValues = tableValues;
    await page.waitForChanges();
    const chart = page.root.shadowRoot.querySelector('component-html');
    expect(chart.innerHTML).not.toBeNull();
  });

这是为了成功渲染组件。

我想要测试用例成功的组件销毁。

有人可以帮忙吗？

【问题讨论】：

组件销毁到底是什么意思？何时从 DOM 中移除？
我的意思是，销毁组件并测试它是否已从 UI 中删除。需要上述场景的单元测试用例。
然后从 DOM 中移除组件并检查它是否存在。如果没有，那你很好。
我正在寻找/寻找一些方法来销毁组件，但看起来没有方法。我只需要从 HTML 节点中删除元素。我同意你的看法。

标签： stenciljs

【解决方案1】：

我尝试直接从测试中调用disconnectedCallback，并期望已调用模拟方法。

    service.cleanup = jest.fn();
    page.rootInstance.disconnectedCallback();
    expect(service.cleanup).toHaveBeenCalled();

【讨论】：