testing with lifecycle hooks (onMounted, ...)

I tried to test my composition function which contains a lifecycle hook:

count.ts

import { onMounted, ref } from 'vue'

export default function withCount() {
  const count = ref(0)

  function increment() {
    count.value = count.value + 1
  }

  onMounted(() => {
    count.value = 23
  })

  return {
    count,
    increment
  }
}

count.spec.ts

import withCount from './count'

describe('counting', function() {

  it("should count", () => {
    const counter = withCount()

    expect(counter.count.value).toEqual(0)
    counter.increment()
    expect(counter.count.value).toEqual(1)
  })
})

Resulting in the following warning:

console.warn
    [Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

       8 |   }
       9 | 
    > 10 |   onMounted(() => {
         |   ^
      11 |     count.value = 23
      12 |   })
      13 | 

Is it possible to get rid of the warning? Ideally it should be possible to trigger the lifecycle calls in the test.

[ktsn]

Lifecycle hooks have to depend on a vue component. Imagine you have onUpdated and onDestroy hooks. How do you test them without vue components?

If you want to just save types, you can use utils like vue-composable-tester

[MichaelSp]

@ygj6 You are right, but wouldn’t you agree that it’s much easier to test just a plain old function instead of a function with bells and whistles around? Especially the life-cycle hooks are not a relevant part of the testing environment. They should not even come from a vue-component because the component doesn’t have to exist and even if it existed (just for the purpose of wrapping the function) it would have artificially triggered life-cycle events. And there is also the argument of separation of concern embedded in the design of the Composition API that argues that you can split template and logic.

Let me propose the following API:

# count.ts
function useCounter() {
  const count = ref(0)

  function increment() {
    count.value++
  }

  onMounted(() => {
    increment()
  })

  return {
    count,
    increment,
  }
}

# count.spec.ts
it('setup', () => {
  const { fn, hooks } = setupForTest( () => useCounter(/* props */) )  // new function `setupForTest`
  expect(fn.count).toBe(0)
  hooks.onMounted()
  expect(fn.count).toBe(1)
  fn.increment()
  expect(fn.count).toBe(2)
})