How to mock/simulate a child component event for jest tests in svelte?

user_8526294 0
Viewed 438

I want to run an isolate test on my svelte parent component (e.g. OrderSearch). Therefore the behavior of the child component (e.g. SearchForm) should be "simulated". The child component throws a search event that is bound in the parent component to initiateSearch.

SearchForm.svelte (Child component - NOT subject of testing - triggering of "submit" should be simulated)

<script>
  const dispatchEvent = createEventDispatcher()
  
  const submit = () => {
    dispatchEvent('search', {firstName: '42'})
  }
</script>

<div on:click="submit">Submit</div>

OrderSearch.svelte (Parent Component - Subject of testing)

<script>
  let results = []

  const initiateSearch = (e) => {
    console.log('initiate search with', e)

    // search is started and returns results
    results = [{orderId: 'bar'}]
  }
</script>  
 
<SearchForm on:search="initiateSearch"></SearchForm>

{#each results as order}
  <div data-testid="order">{order.id}</div>     
{/each}

My not working approach so far when testing the OrderSearch.svelte in an isolated way:

OrderSearchTest.js

const {getAllByTestId, component} = render(Component)

expect(getAllByTestId('order')).toHaveLength(0)

await component.getSubComponent('SearchForm').dispatchEvent('search', {detail: {orderId: 'jonine'}}

expect(getAllByTestId('order')).toHaveLength(1)
svelte jestjs
1 Answers

Don't mock the child's event. You don't need to test that the on:<event> directive works, I would assume that Svelte has corresponding tests to ensure that it does. You need to test only that your component responds in the way that it should when the code that is executed on a particular event occurs. So trigger the event using fireEvent and mock or spy on a function, or function(s) called in the event handler.

Here's an example with appropriate changes made to your component:

OrderSearch.svelte

<script>
  import http from "path/to/some/http/util"
  let results = []

  const initiateSearch = async (e) => {
    // search is started and returns results
    results = await http.fetchSearchResults(e.detail)
  }
</script>  
 
<SearchForm on:search="initiateSearch"></SearchForm>

{#each results as order}
  <div data-testid="order">{order.id}</div>     
{/each}

Then the corresponding test could look like:

import mockHttp from "path/to/some/http/util"

jest.mock("path/to/some/http/util")

...

it("calls search endpoint and renders results after fetch resolves", async () => {
   mockHttp.fetchSearchResults.mockResolvedValue([{orderId: 'bar'}])
   const { queryByText, getAllByTestId } = render(Component)
   const submit = queryByText("Submit")

   expect(getAllByTestId('order')).toHaveLength(0)

   await fireEvent.click(submit)

   expect(getAllByTestId('order')).toHaveLength(1)
})
user_98307550
Related