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

【问题标题】：Svelte Testing Library doesn't update component state on input value changeSvelte 测试库不会在输入值更改时更新组件状态
【发布时间】：2021-10-15 18:56:37
【问题描述】：

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

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

所以当你改变输入标签的值时，它会改变标题中的文字。

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

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

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

【问题讨论】：

标签： testing frontend state svelte

【解决方案1】：

几件事：

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

更新测试：

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

【讨论】：

谢谢，这行得通！虽然我最终改用了userEvent 库?
谢谢你救了我最后的两天。一件事：我没有必要包装 fireEvent（即使我的测试发送了一个 ajax 请求）。我做了 @Takin1n1 的相反动作：我们正在使用需要 ESM 编译的 $app/env 开玩笑。而且我们没有实现让 ESM/jest 与 userEvent 一起工作。