16 ms·

Can you share an example of a testable vue component? I would like to see that. I got disillusioned around Vue 2. When they had proxies in front of class attri

• CharlieDigital 2y ago
  The VueUse library is a really good place for these since it's all composables like `useClipboard`. Here's an example of a Vue composable for the clipboard: https://github.com/vueuse/vueuse/blob/main/packages/core/useClipboard/index.ts https://github.com/vueuse/vueuse/blob/main/packages/core/use... Here is an example of how it's used: https://github.com/vueuse/vueuse/blob/main/packages/core/useClipboard/index.md https://github.com/vueuse/vueuse/blob/main/packages/core/use... And the unit tests: https://github.com/vueuse/vueuse/blob/main/packages/core/useClipboard/index.browser.test.ts https://github.com/vueuse/vueuse/blob/main/packages/core/use... Another one from the same lib: https://github.com/vueuse/vueuse/blob/main/packages/core/useColorMode/index.ts https://github.com/vueuse/vueuse/blob/main/packages/core/use... Unit test: https://github.com/vueuse/vueuse/blob/main/packages/core/useColorMode/index.test.ts https://github.com/vueuse/vueuse/blob/main/packages/core/use... I'm pretty certain that Svelte took inspiration from Vue composables and I'd also guess that the community will have a bit of friction before people start to get its use cases (same as it was with Vue when it was introduced).
• MrJohz 2y ago
  With Vue 3 and the composition API, you can do basically the same things you're doing in Svelte. You can also add SolidJS and Preact to this list as well - the magic ingredient in all these frameworks is signals, which allow you to have reactive data without having to have a UI framework to provide lifecycle events. A good example in Vue is the top example in this page: https://test-utils.vuejs.org/guide/advanced/reusability-composition https://test-utils.vuejs.org/guide/advanced/reusability-comp... The other examples show some other things you can do if you want, although I'd typically recommend against it - keep your signal-related code free of component/lifecycle-related logic, and it will almost always be much easier to test. (As an aside, I'd add Angular to the list of frameworks that are easy to test, although the framework feels like it goes out of its way to convince you of the opposite. Services are just classes that maintain reactive data - originally via RxJS/Observables, although now signals are also supported - and if you keep them like that, they're fairly easy to test. Unfortunately, Angular's decorators/DI/module system is very pervasive, and at least when I was last using it, meant that even theoretically simple tests still needed lots of boilerplate. But theoretically, it belongs in the same category as the frameworks above.)
  • CharlieDigital 2y ago
    > ...the magic ingredient in all these frameworks is signals, which allow you to have reactive data without having to have a UI framework to provide lifecycle events This is something that I think a lot of devs don't fully appreciate. A recent writeup on the inverted reactivity model of React: https://chrlschn.dev/blog/2025/01/the-inverted-reactivity-model-of-react/ https://chrlschn.dev/blog/2025/01/the-inverted-reactivity-mo... And short video walkthrough: https://youtu.be/7OhyP8H7KW0 https://youtu.be/7OhyP8H7KW0