Как протестировать свойства компонентов Svelte с помощью Vitest?

Question

Я хочу протестировать свойства компонента Svelte с помощью Vitest .

Компонент:

      <script>
  export let foo
</script>

<div>{foo}</div>

Тест:

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

Когда я запускаю этот тест, я получаю следующую ошибку:

Реквизиты не могут быть прочитаны непосредственно из экземпляра компонента, если только они не компилируются с помощью «accessors: true» или «<svelte:options accessors/>».

Согласно этому сообщению , я должен пройтиaccessors: trueкrender()функция:

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

Однако это тоже не работает, и я продолжаю получать ту же ошибку.

Как я могу протестировать свойства компонента Svelte?

Answer 1

Вместо того, чтобы всегда включатьaccessorsопция компилятора , которая может отрицательно повлиять на производительность, вот как это сделать, только во время тестирования.vitestавтоматически устанавливает логическую переменную среды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(),
  },
}

Answer 2

Добавьте это вsvelte.config.js

      compilerOptions: {
  accessors: true
},