Как проверить реактивность стройного входа?

Я написал изящный компонент App в котором вы можете написать предложение в input и предложение будет вынесено в h1.

App.svelte

<script>
  let sentence = "Hello world";
</script>

<main>
  <h1>{sentence}</h1>
  <input
    value={sentence}
    type="text"
    on:input={(value) => {
      sentence = value.target.value
    }}
  />

</main>

Но когда я попытался протестировать это поведение с помощью @testing-library / svelte, вход не был реактивным, и текст вh1 все еще "Hello world" (но значение на входе изменилось в соответствии с первым expect).

App.test.js

import { render, fireEvent } from "@testing-library/svelte";
import App from "./App.svelte";

it("should write in input", async () => {
  const { container } = render(App);
  const input = container.querySelector("input[type=text]");

  await fireEvent.change(input, { target: { value: "test" } });

  expect(input.value).toBe("test"); // ✅
  expect(container.querySelector("h1").textContent).toBe("test"); // ❌
});

Сообщение об ошибке Jest:

Expected: "test"
Received: "Hello world"

   8 |   await fireEvent.change(input, { target: { value: "test" } });
  10 |   expect(input.value).toBe("test");
> 11 |   expect(container.querySelector("h1").textContent).toBe("test");
  12 | });

Вы можете проверить это поведение с помощью codeandbox.

Кто-нибудь знает, почему этот тест не работает?

Источник

2 ответа

Решение

TL;DR:

Использовать fireEvent.input(...) как вы предлагаете в комментариях.

Оригинальная мысль:

Интересно, связано ли это с тем, что он запускает change событие, когда Svelte подписан на inputсобытие. Попробуйте изменить его наon:changeи вы увидите прохождение теста. Итак, идеальной ситуацией было бы иметьfireEvent запуск 'input' событие.

Источник

И если вы импортируете в начале файла:

      import { screen } from '@testing-library/dom'

и в конце вы помещаете это:

       expect(
      await screen.findByText('test'),
    ).toBeVisible()
Источник
Другие вопросы по тегам