Как я могу эффективно тестировать компоненты SvelteKit, включая мониторинг реактивных свойств и свойств, передаваемых дочерним компонентам?

Question

Я изо всех сил пытаюсь понять, как эффективно тестировать такие компоненты SvelteKit, как этот.

Я хочу протестировать свойство, и один из способов — имитировать компонент. Однако хотелось бы найти более элегантное решение. Есть ли способ проверить, какие реквизиты передаются вTaxonLinkButtonкомпонент? Или есть способ напрямую проверить реактивное свойствоselectedTaxonкомпонента?

Какой подход лучше всего? Пожалуйста, подскажите мне, если мой подход к тестированию логически неверен.

      <script lang="ts">
  import { page } from '$app/stores';

  import TaxonLinkButton from '../TaxonLinkButton.svelte';

  import type { Taxon } from '$types/product.type';

  export let taxonomies: Taxon[];

  let selectedTaxon: Taxon | null = null;

  $: {
    const permalink = $page.url.pathname.replace(/\/t\//g, '');
    taxonomies.find((taxonomy) => {
      if (taxonomy.permalink === permalink) {
        selectedTaxon = taxonomy;
        return true;
      }
    });
  }
</script>

<div data-testid="test-taxonomy-three-component" class="flex flex-col mt-5 lg:mt-0">
  <TaxonLinkButton {selectedTaxon} >
    {taxonomy.name}
  </TaxonLinkButton>
</div> 

Answer 1

Во время тестирования вы можете скомпилировать компонент в режиме разработки. Таким образом, каждый компонент будет предоставлять дополнительныеcomponent.$$.hmr_cmpобъект, имеющий$capture_state()функция-геттер, которая возвращает все локальное состояние компонента.

Я собрал демо-версию stackblitz, открыл консоль, чтобы просмотреть журнал. Вы можете протестировать противcomponent.$$.hmr_cmp.$capture_state().selectedTaxonнапрямую.