chore: add test

Author: rick-hup

packages/motion/src/value/__tests__/use-transform.test.tsx

@@ -0,0 +1,28 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { Motion } from '@/components'
+import { defineComponent, nextTick, onMounted, ref, watchEffect } from 'vue'
+import { useTransform } from '@/value/use-transform'
+import { delay } from '@/shared/test'
+
+describe('useTransform', () => {
+  it('should update when reactive value changes', async () => {
+    const Component = defineComponent({
+      setup() {
+        const x = ref(0)
+        const transform = useTransform(() => {
+          return x.value
+        })
+        onMounted(() => {
+          x.value = 100
+        })
+        return () => {
+          return <Motion style={{ x: transform }} />
+        }
+      },
+    })
+    const wrapper = mount(Component)
+    await delay(100)
+    expect(wrapper.html()).toContain('100')
+  })
+})

packages/motion/src/value/use-computed.ts

@@ -1,6 +1,6 @@
 import { useCombineMotionValues } from '@/value/use-combine-values'
 import { type MotionValue, collectMotionValues } from 'framer-motion/dom'
-import { onBeforeUpdate } from 'vue'
+import { watchEffect } from 'vue'
 
 export function useComputed<T>(computed: () => T): MotionValue<T> {
   /**
@@ -15,7 +15,7 @@ export function useComputed<T>(computed: () => T): MotionValue<T> {
 
   collectMotionValues.current = undefined
 
-  onBeforeUpdate(() => {
+  watchEffect(() => {
     unsubscribe()
     collectMotionValues.current = []
     updateValue()