Тестовый пример Svelte Jest, придающий document.getElementId значение null

Я пытаюсь написать пример модульного теста для моего компонента svelte, используя библиотеку jest-transform-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 ("имя")

приходит как null, из-за чего возникает ошибка исключения нулевого указателя.

Есть идеи, что я делаю неправильно?


javascript jestjs svelte svelte-3
person hatellla    schedule 12.09.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В 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} />
person Antony Jones    schedule 13.09.2019
comment
Спасибо за ответ. Но есть ли способ использовать здесь document.getElementById? Почему не работает? Есть идеи по этому поводу? - person hatellla; 13.09.2019
comment
Вы можете использовать document.getElementById, поскольку Svelte просто создает обычные узлы DOM. Что вам нужно знать, так это когда вы его вызываете. Важно убедиться, что узлы записаны в DOM. Вы можете выполнить некоторые проверки, прежде чем пытаться, но лучший способ - не использовать его - то же самое и с любыми динамическими элементами DOM, добавленными с помощью javascript. Если узел не существует в DOM, когда вы пытаетесь его выбрать, выбор не удастся. - person Antony Jones; 17.09.2019