unit-testing - 如何使用 Vitest 测试 Svelte 组件 props？

Question

我想测试 Svelte 的 props组件 Vitest .

组件:

<script>
  export let foo
</script>

<div>{foo}</div>

测试:

const { component } = render(MyComponent, { foo: 'bar' })
expect(component.foo).toBe('bar')

当我运行此测试时，出现以下错误:

Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'

根据this post ，我应该将 accessors: true 传递给 render() 函数:

const { component } = render(MyComponent, { accessors: true })

但是，这也不起作用，并且我不断收到相同的错误。

如何测试 Svelte 组件 props？

Answer 1

而不是总是启用 accessors compiler option这可能会对性能产生负面影响，以下是仅在测试时执行此操作的方法。 vitest 在运行时自动设置 bool 环境变量 process.env.TEST=true。

/** @type {import('@sveltejs/kit').Config} */
export default {
  extensions: [`.svelte`, `.svx`, `.md`],

  preprocess: preprocess(),

  compilerOptions: {
    // enable direct prop access for vitest unit tests. now you can do
    // const comp = new Component({ target: document.body, props: {...} })
    // comp.access_some_prop
    accessors: process.env.TEST,
  },

  kit: {
    adapter: adapter(),
  },
}