Как протестировать реакцию на событие компонента в 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>
но вроде ничего не получилось)
У кого-нибудь есть идеи? Спасибо!