Как протестировать параметры выбора пользовательского интерфейса Svelte Material с помощью Testing-Library/Vitest?

Question

Я использую компонент меню выбора Svelte Material UI , чтобы контролировать, отображаются ли некоторые элементы в моем проекте Svelte. Я хотел бы проверить, отображаются ли для данного ввода правильные элементы. К сожалению, я не могу понять, как запросить и щелкнуть компонент в библиотеке тестирования и Vitest. Я не уверен, что у меня нет правильного запроса или нет правильного события.

Вот упрощенный пример моего компонента Svelte:

        import Select, { Option } from '@smui/select';
 
  const shapes = {
    'square': 'square',
    'rectangle': 'square',
    'thin rectangle': 'thin rectangle',
    'cylinder': 'circle',
    'semi-circle': 'semi-circle',
    'triangle': 'triangle',
    'arch': 'arch'
  };

  let value = 'square';

  $: correctHole = shapes[value];
</script>

<div>
  <Select
    bind:value label="What hole does this shape go into?"
    style="width: 400px"
    data-testid="select-shape"
  >
    {#each Object.keys(shapes) as shape}
      <Option value={shape}>{shape}</Option>
    {/each}
  </Select>

  <pre class="status">It goes in the {correctHole} hole!</pre>
</div>

И вот тест, который я пробую:

      import { describe, it, expect } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/svelte';

import HoleSelect from '$lib/HoleSelect.svelte';

describe('Switch options', () => {
    
    it('Can see the triangle hole', async () => {
        render(HoleSelect);

        await fireEvent.click(screen.getByTestId('select-shape'));
        await fireEvent.click(screen.getByText('triangle'));

        expect(screen.getByText('It goes in the triangle hole!')).toBeInTheDocument();
    });
});

Этот тест не пройден: ожидаемый мной текст все еще находится в исходном состоянии («Он входит в квадратное отверстие!»), а элемент треугольного списка не выбран в соответствии с выводом:

       FAIL  src/index.test.js > Switch options > Can see the triangle hole
TestingLibraryElementError: Unable to find an element with the text: It goes in the triangle hole!. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style

...

<li
              aria-disabled="false"
              aria-selected="false"
              class="mdc-deprecated-list-item"
              data-value="triangle"
              role="option"
              style=""
              tabindex="-1"
              value="0"
            >
              <span
                class="mdc-deprecated-list-item__ripple"
              />
              
              triangle
            </li>

...

<pre
        class="status"
      >
        It goes in the 
        square
         hole!
      </pre>

Этот пример можно найти здесь: https://github.com/pcclarke/select-testing .

1. Есть ли какая-то другая комбинация запроса и событий, которую мне следует попробовать?
2. На самом деле мне нужно протестировать то, как компонент обновляется по мереvalueизменения, есть ли способ изменить его напрямую, вместо использованияSelectкомпонент?