如何在单元测试中设置Svelte组件的私有变量？

下面提供几种可行的方案，无需将组件内的a改为导出属性：

方案1：直接操作组件实例的内部状态 #

Svelte编译后的组件实例会把内部变量存在$$.ctx数组里（不同版本可能有细微差异，但这个属性在多数版本中通用）。你可以渲染组件后拿到实例，修改对应位置的变量值：

import { render, screen } from "@testing-library/svelte";
import AComponent from "./a.svelte";

test("修改私有变量a", async () => {
  const aMock = "d";
  // 渲染时保留组件实例引用
  const { component } = render(AComponent);
  
  // 你的组件里a是第一个声明的变量，索引通常为0
  // 不确定的话可以打印component.$$.ctx查看具体位置
  component.$$.ctx[0] = aMock;
  // 触发组件更新
  component.$$.update();
  
  expect(screen.getByTestId("c").textContent).toBe(aMock);
});

⚠️ 注意：这种方法依赖Svelte内部实现，版本更新可能导致属性变化，需要根据实际编译后的代码调整。

方案2：通过Svelte上下文暴露修改方法（更稳定） #

如果不想依赖内部实现，可以在组件里用setContext添加一个修改变量的方法，无需导出变量：

修改a.svelte：

<script>
  import { setContext } from "svelte";
  let a = "b";
  
  setContext("updateA", (newVal) => {
    a = newVal;
  });
</script>

<div data-testid="c">{a}</div>

测试代码：

import { render, screen } from "@testing-library/svelte";
import { getContext } from "svelte";
import AComponent from "./a.svelte";

test("通过上下文修改私有变量a", async () => {
  const aMock = "d";
  render(AComponent);
  
  const updateA = getContext("updateA");
  updateA(aMock);
  
  expect(screen.getByTestId("c").textContent).toBe(aMock);
});

这种方法更稳定，不依赖内部细节，只是给组件加了几行上下文相关代码，仍保持变量私有。

方案3：模拟用户交互（优先推荐，如果适用） #

如果私有变量a是由用户操作（比如输入、点击）触发修改的，建议直接模拟这些交互，更贴近真实用户场景。比如如果a绑定了输入框，就用fireEvent.input触发输入，而不是直接修改变量。

内容的提问来源于stack exchange，提问作者manymanymore