Svelte Jest 测试用例使 document.getElementbyId 为 null

Question

我正在尝试使用 jest-transform-svelte 库为我的 svelte 组件编写单元测试用例。以下是组件：

XYZ.svelte

<script>
  function submit() {
    var name = document.getElementById("name").value; // Here document.getElementById("name") is coming as null when run from unit test case.
    dispatch("abc", {
      text: name
    });
  }
</script>
<input id="name" value="" type="text" label="Name" />
<button label="Submit" variant="primary" on:click={submit} />

XYZ.test.js

import XYZ from "XYZ.svelte";

describe("XYZ Component", () => {
  it('dispatches abc event on submit', (next) => {

    const target = document.createElement('div');
    const xyz = new XYZ({ target: target });

    setTimeout(() => {
      const button = target.querySelector("button");
      button.click();

      xyz.$on('abc', event => {
        next();
      });
    }, 10);
  });
});

当 button.click 测试用例发生时，调用触发了 XYZ.svelte 中的提交函数，但是，

document.getElementById("name")

以 null 的形式出现，因为出现空指针异常错误。

知道我做错了什么吗？

Answer 1

在 Svelte 中，您可以通过将元素的引用绑定到变量来避开 document.getElementById。尝试按如下方式更改您的组件：

<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();
  let name = null;

  function submit () {
    dispatch("abc", {
      text: name
    });
  }
</script>
<input bind:value={name} type="text" label="Name" />
<button label="Submit" variant="primary" on:click={submit} />