testing with lifecycle hooks (onMounted, ...)
See original GitHub issueI 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.
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Learn How to Test Vue.js Lifecycle Methods
The lesson contains examples of how to test the mounted , beforeDestroy and destroyed hook. It should give you the insights to test...
Read more >Testing Vue.js lifecycle hooks - Medium
The method init() was mocked with jest.fn() before the creation of the component, so that the mounted lifecycle hook was not yet passed...
Read more >testing method calls in `mounted` lifecycle hook in vue test ...
I have the following lifecycle hook in my component ...
Read more >Lifecycle Hooks | Vue.js
Each Vue component instance goes through a series of initialization steps when it's created - for example, it needs to set up data...
Read more >Vue Lifecycle Hooks | Front-End Development Projects with ...
created : You will be able to access reactive data and events, but the templates and DOM are not mounted or rendered. This...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Lifecycle hooks have to depend on a vue component. Imagine you have
onUpdated
andonDestroy
hooks. How do you test them without vue components?If you want to just save types, you can use utils like vue-composable-tester
@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: