title: Calling 'created' method inside Jest tests on Vue.js
body: <p>I'm testing my <code>Activity.vue</code> component on Vue.js with Jest.</p>
  
  <p>My <code>Activity.vue</code> component calls the <code>initializeTable()</code> method inside <code>created()</code> in order to initialize my <code>tableRows</code> property.</p>
  
  <p>The problem is, when I run my tests, Jest does not call 'created()' method and, for that reason, it does not initialize my <code>tableRows</code> property, then the test says that my <code>tableRows</code> property is equal to <code>[]</code> (original state).</p>
  
  <p>How could I call <code>created()</code> method when I'm testing with Jest?</p>
  
  <p>I've already tried to call it explicitly inside the test (i.e. <code>wrapper.vm.$created()</code>), but to no avail.</p>
  
  <p>Would anyone know how to solve it?</p>
  
  <p>I give my code below.</p>
  
  <p>Thank you in advance.</p>
  
  <p><strong>Activity.spec.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { shallowMount } from '@vue/test-utils'
  import Activity from '@/views/Activity.vue'
  import api from '@/assets/js/api'
  
  const expectedTableRows = [...]
  
  const $t = () =&gt; {}
  
  api.getActivity = jest.fn(
    () =&gt; Promise.resolve({
      data: [...]
    })
  )
  
  describe('Activity.vue', () =&gt; {
    it('renders vm.tableRows in created()', () =&gt; {
      const wrapper = shallowMount(Activity, {
        mocks: { $t }
      })
      // wrapper.vm.$created()
      expect(wrapper.vm.tableRows).toEqual(expectedTableRows)
    })
  })
  </code></pre>
  
  <p><strong>Activity.vue</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import api from '@/assets/js/api'
  
  export default {
    data () {
      return {
        tableRows: []
      }
    },
    created () {
      this.initializeTable()
    },
    methods: {
      initializeTable () {
        this.loading = true
  
        api.getActivity().then(response =&gt; {
          this.tableRows = response.data
        }).catch(error =&gt; {
          this.errorBackend = error
        }).finally(() =&gt; {
          this.loading = false
        })
      }
    }
  }
  </code></pre>
  
  <p><strong>EDIT 1: Solution</strong></p>
  
  <p>As Husam Ibrahim described, the function is asynchronous, because of that, I needed to refactor the test using the following <a href="https://vue-test-utils.vuejs.org/guides/testing-async-components.html#testing-asynchronous-behavior" rel="nofollow noreferrer">tips</a> and now I was able to fix it.</p>
  
  <p>I give the correct code below:</p>
  
  <pre class="lang-js prettyprint-override"><code>import flushPromises from 'flush-promises'    // &lt;--
  
  ...
  
  describe('Activity.vue', () =&gt; {
    it('renders wm.tableRows after created()', async () =&gt; {    // &lt;--
      const wrapper = shallowMount(Activity, {
        mocks: { $t }
      })
  
      await flushPromises()    // &lt;-- 
  
      expect(wrapper.vm.tableRows).toEqual(expectedTableRows)
    })
  })
  </code></pre>