我写了一个苗条的组件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"); // ❌
});
笑话错误消息:
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检查此行为。
有人知道为什么这个测试失败了吗?
答案 0 :(得分:2)
TL; DR:
按照您在评论中的建议使用fireEvent.input(...)
。
原始思想:
我想知道这是否与Svelte订阅change
事件时触发input
事件有关。尝试将其更改为on:change
,您会看到测试通过。现在,理想的情况是让fireEvent
触发'input'
事件。