Как протестировать реакцию на событие компонента в Svelte?

В Svelte у меня есть родительский компонент, который прослушивает событие компонента , отправленное дочерним компонентом.

я знаю, как использоватьcomponent.$onчтобы убедиться, что отправленное событие работает правильно в компоненте, который выполняет отправку , например так.

Но я не могу понять, как проверить, что компонент, который получает отправку, делает правильные вещи в ответ.

Вот простой пример:

Ребенок.стройный

      <script>
  import { createEventDispatcher } from 'svelte'

  const dispatch = createEventDispatcher()
  
  function handleSubmit(event) {
    dispatch('results', 'some results')
  }
</script>

<form on:submit|preventDefault={ handleSubmit }>
  <button type='submit'>Submit</button>
</form>

Родитель.svelte

      <script>
  import Child from './Child.svelte'

  let showResults = false

  function handleResults(event) {
    showResults = true
  }
</script>

<Child on:results={ handleResults } />

{ #if showResults }
  <p id='results'>Some results.</p>
{ /if }

Идея состоит в том, чтобы в конечном итоге написать тест, используя@testing-library/svelteнравиться:

      import { render } from '@testing-library/svelte'
import Parent from './Parent.svelte'

test('shows results when it receives them', () => {
  const rendered = render(Parent)
 
  // ***
  // Simulate the `results` event from the child component?
  // ***

  // Check that the results appear.
})

Если бы родитель реагировал на событие DOM, я бы использовалfireEvent.

Но я не знаю, как мне получить компонент в этом случае, и даже если бы я мог, я предполагаю, что Svelte использует другой механизм для событий компонента.

(Просто чтобы проверить это, я использовалcreateEventуволить обычайresultsсобытие на одном из элементов DOM, отображаемых<Child>но вроде ничего не получилось)

У кого-нибудь есть идеи? Спасибо!

0 ответов

Другие вопросы по тегам