title: Test vue component with setTimeout function in Jest
body: <p>I'm trying to test debounce function with setTimeout. This is an input with ajax api call. I tried jest.useFakeTimers() and jest.runAllTimers() but without success. I also tried to run  jest.advanceTimersByTime(501) - because my timeout is for 500ms, but still no luck.</p>
  
  <p>Form component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class="columns"&gt;
        &lt;div class="column"&gt;
          &lt;b-field :label="`${$t('categories')}`" label-for="categories"&gt;
            &lt;b-taginput
              id="categories"
              v-model="categories"
              :data="filteredCategories"
              :autocomplete="true"
              :allow-new="false"
              :open-on-focus="false"
              icon="label"
              @typing="getFiltered"
            &gt;
            &lt;/b-taginput&gt;
          &lt;/b-field&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script lang="ts"&gt;
  import {
    defineComponent,
    reactive,
    ref,
    Ref,
    toRefs
  } from '@vue/composition-api'
  import CategoriesRepository from '~/repository/categories'
  
  export default defineComponent({
    props: {
      product: {
        type: any,
        default: () =&gt; {}
      }
    },
    setup(props, context) {
      const CategoriesAPI = new CategoriesRepository(context.root.$store)
      const timeout: any = null
  
      const state = reactive({
        categories: [],
        filteredCategories: [],
        // needed to debounce search
        searchTimeout: timeout
      })
  
      const getCategories = () =&gt; {
        CategoriesAPI.all()
          .then((response) =&gt; response.json())
          .then((data) =&gt; {
            state.categories = data
          })
          .catch(() =&gt; {
            state.categories = []
          })
      }
      const getFiltered = (search: string) =&gt; {
        clearTimeout(state.searchTimeout)
        // lines above are not reached by code coverage
        state.searchTimeout = setTimeout(() =&gt; {
          if (search.length &gt; 0) {
            CategoriesAPI.search(search)
              .then((response) =&gt; response.json())
              .then((data) =&gt; {
                state.filteredCategories = data
              })
              .catch(() =&gt; {
                state.filteredCategories = []
              })
          }
        }, 500)
      }
      return {
        ...toRefs(state),
        getFiltered
      }
    }
  })
  &lt;/script&gt;
  
  </code></pre>
  
  <p>and Form.spec.ts:</p>
  
  <pre><code>import { createLocalVue, mount } from '@vue/test-utils'
  import CompositionApi from '@vue/composition-api'
  import Buefy from 'buefy'
  import mockFetch from '@/test'
  import Form from '@/components/products/Form.vue'
  
  const localVue = createLocalVue()
  localVue.use(CompositionApi)
  localVue.use(Buefy)
  
  describe('Categories in product form', () =&gt; {
    jest.useFakeTimers()
    test('Test getting categories', async () =&gt; {
      const wrapper = mount(Form, {
        localVue
      })
      const fake_categories = ['test', 'food', 'travel']
      // upload fetch
      // it should be called only by getFiltered
      window.fetch = mockFetch(200, fake_categories)
      wrapper.find('#categories').setValue('test')
      wrapper.find('#categories').trigger('change')
      jest.runAllTimers()
      // then I see in code coverage that state.searchTimeout = setTimeout(()... was not called.
    })
  </code></pre>
  
  <p>and mockFetch:</p>
  
  <pre><code>function mockFetch(status: number, data: any) {
    return jest.fn().mockImplementation(() =&gt;
      Promise.resolve({
        ok: true,
        status: status,
        json: () =&gt; data
      })
    )
  }
  </code></pre>