javascript - 如何测试 slim 的输入 react 性?

标签 javascript jestjs svelte svelte-testing-library

我写了一个 svelte 组件 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 测试这种行为时,输入不是 react 性的,文本在 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"); // ❌
});
玩笑错误消息:
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 | });
您可以使用 codesandbox 检查此行为。 .
有人知道为什么这个测试失败了吗?

最佳答案

TL;博士:
使用 fireEvent.input(...)正如你在评论中建议的那样。
原想法:
我想知道这是否与触发 change 的事实有关。 Svelte 订阅 input 时的事件事件。尝试将其更改为 on:change你会看到测试通过。现在,理想的情况是拥有 fireEvent触发 'input'事件。

关于javascript - 如何测试 slim 的输入 react 性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63343948/

相关文章:

javascript - 如何使用 PHP 在 DropZone 中触发错误事件?

javascript - 将 s3 对象数据放入数组 - Node

javascript - 将无状态组件分成较小的部分

javascript - Angular 中使用 App.run() 的原因和位置

javascript - Jest 模拟实现不适用于 require ('' )

reactjs - 用 enzyme 测试时如何等待componentDidMount中的setState解决?

javascript - 如何访问 svelte 组件中的命名插槽?

custom-element - 未捕获( promise )TypeError : Illegal constructor at new SvelteElement (index. mjs:1381)

node.js - IO.js 1.4.3 中使用 require() 时 Jest (JS) 段错误 11

javascript - 更新数组中的特定对象