Svelte 测试库不会在输入值更改时更新组件状态

Question

我正在尝试使用 svelte 测试库测试一个组件。

该组件有一个输入标签，其值绑定（使用 bind:）到一个状态变量，并且该状态变量指示标题的文本。

因此，当您更改输入标签的值时，它会更改标题中的文本。

我使用 svelte 测试库设置了一个单元测试，并使用 fireEvent 更改输入标签的值，但在断言标题中的文本时，它并没有改变。就好像输入标签值改变了，但是svelte组件状态没有更新。

为什么状态没有改变，标题没有更新？我还需要做些什么才能让它更新吗？

Codesandbox repro（运行个测试用例看问题）：https://codesandbox.io/s/xnxjo

Answer 1

几件事：

当您在 Svelte 中的输入组件上使用 bind:value 时，Svelte 会附加一个 input 事件侦听器以了解何时更新该值。触发更改事件将更新值，但不会触发事件侦听器。因此，使用 fireEvent.input 而不是 fireEvent.change。
仅仅因为事件已经触发并不意味着组件状态已经更新。您可以用 act 包装 fireEvent 以确保组件在声明任何内容之前更新。

更新测试：

it("should write in input (variant)", async () => {
  const app = render(App);
  const input = app.getByLabelText("textbox");

  await act(() => fireEvent.input(input, { target: { value: "test" } }));

  expect(input.value).toBe("test");
  expect(app.container.querySelector("h1").textContent).toBe("test");
});

Svelte 测试库不会在输入值更改时更新组件状态

Svelte Testing Library doesn't update component state on input value change

testing

frontend

state

svelte