3

我写了一个苗条的组件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"（但输入中的值已根据 first 改变expect）。

应用程序.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"); // ❌
});

开玩笑的错误信息：

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

您可以使用代码和框检查此行为。

有人知道为什么这个测试失败了吗？

4

2 回答 2

3

TL;博士：

fireEvent.input(...)按照评论中的建议使用。

原来的想法：

我想知道这是否与changeSvelte 订阅事件时触发事件有关input。尝试将其更改为on:change，您将看到测试通过。现在，理想的情况是fireEvent触发一个'input'事件。

于 2020-08-12T18:08:03.537 回答
0

如果您在文件开头导入：

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

最后你把这个：

 expect(
      await screen.findByText('test'),
    ).toBeVisible()
于 2021-10-23T15:11:58.190 回答