jestjs - 如何在 svelte 中模拟/模拟子组件事件以进行 Jest 测试？

Question

我想在我的 svelte 父组件(例如 OrderSearch)上运行隔离测试。因此，应该“模拟”子组件(例如 SearchForm)的行为。子组件抛出一个 search 事件，该事件在父组件中绑定(bind)到 initiateSearch。

SearchForm.svelte(子组件 - 不是测试对象 - 应该模拟“提交”的触发)

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

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

OrderSearch.svelte(父组件 - 测试对象)

<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}
  

到目前为止，在以隔离方式测试 OrderSearch.svelte 时，我的无效方法:

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)

Answer 1

不要 mock child 的事件。您不需要测试 on:<event>指令有效，我会假设 Svelte 有相应的测试来确保它确实有效。您只需要测试您的组件是否以在特定事件上执行的代码发生时应有的方式响应。所以使用 fireEvent 触发事件并模拟或监视在事件处理程序中调用的一个或多个函数。

这是一个对您的组件进行适当更改的示例:

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}

然后相应的测试看起来像:

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)
})