test(hmr): failing test

diff --git a/__tests__/hmr.spec.ts b/__tests__/hmr.spec.ts
index 09e6ea0596b80dcf1e3503b79e8faa9a05e1733c..27e9d4ba23d9e8b6ad800f116faaab28370a0256 100644 (file)
--- a/__tests__/hmr.spec.ts
+++ b/__tests__/hmr.spec.ts
@@ -37,67 +37,187 @@ describe('HMR', () => {
     setActivePinia(createPinia())
   })
 
-  it('adds new state properties', () => {
-    const useStore = defineStore(baseOptions)
-    const store: any = useStore()
-    store.n++
-
-    // simulate a hmr
-    defineStore({
-      ...baseOptions,
-      state: () => ({ newOne: 'hey', n: 0 }),
-    })(null, store)
-
-    expect(store.$state).toEqual({ n: 1, newOne: 'hey' })
-    expect(store.n).toBe(1)
-    expect(store.newOne).toBe('hey')
-
-    defineStore({
-      ...baseOptions,
-      state: () => ({ other: 'new', n: 0 }),
-    })(null, store)
+  describe('state', () => {
+    it('adds new state properties', () => {
+      const useStore = defineStore(baseOptions)
+      const store: any = useStore()
+      store.n++
+
+      // simulate a hmr
+      defineStore({
+        ...baseOptions,
+        state: () => ({ newOne: 'hey', n: 0 }),
+      })(null, store)
+
+      expect(store.$state).toEqual({ n: 1, newOne: 'hey' })
+      expect(store.n).toBe(1)
+      expect(store.newOne).toBe('hey')
+
+      defineStore({
+        ...baseOptions,
+        state: () => ({ other: 'new', n: 0 }),
+      })(null, store)
+
+      expect(store.$state).toEqual({ n: 1, other: 'new' })
+      expect(store.n).toBe(1)
+      expect(store).not.toHaveProperty('newOne')
+      expect(store.other).toBe('new')
+    })
+
+    it('adds new state properties', () => {
+      const useStore = defineStore(baseOptions)
+      const store: any = useStore()
+      store.n++
+
+      // simulate a hmr
+      defineStore({
+        ...baseOptions,
+        state: () => ({ newOne: 'hey', n: 0 }),
+      })(null, store)
+
+      expect(store.$state).toEqual({ n: 1, newOne: 'hey' })
+      expect(store.n).toBe(1)
+      expect(store.newOne).toBe('hey')
+
+      defineStore({
+        ...baseOptions,
+        state: () => ({ other: 'new', n: 0 }),
+      })(null, store)
+    })
+
+    it('keeps state reactive', () => {
+      const useStore = defineStore(baseOptions)
+      const store: any = useStore()
+
+      const directSpy = jest.fn()
+      const $stateSpy = jest.fn()
+
+      watch(() => store.n, directSpy, { flush: 'sync' })
+      watch(() => store.$state.n, $stateSpy, { flush: 'sync' })
+
+      // simulate a hmr
+      defineStore({
+        ...baseOptions,
+        state: () => ({ newOne: 'hey', n: 0 }),
+      })(null, store)
+
+      expect(directSpy).toHaveBeenCalledTimes(0)
+      expect($stateSpy).toHaveBeenCalledTimes(0)
+
+      store.n++
+      expect(directSpy).toHaveBeenCalledTimes(1)
+      expect($stateSpy).toHaveBeenCalledTimes(1)
+      store.$state.n++
+      expect(directSpy).toHaveBeenCalledTimes(2)
+      expect($stateSpy).toHaveBeenCalledTimes(2)
+
+      defineStore({
+        ...baseOptions,
+        state: () => ({ other: 'new', n: 0 }),
+      })(null, store)
+
+      store.n++
+      expect(directSpy).toHaveBeenCalledTimes(3)
+      expect($stateSpy).toHaveBeenCalledTimes(3)
+
+      store.$state.n++
+      expect(directSpy).toHaveBeenCalledTimes(4)
+      expect($stateSpy).toHaveBeenCalledTimes(4)
+    })
+
+    it.todo('handles nested objects updates')
   })
 
-  it('keeps state reactive', () => {
-    const useStore = defineStore(baseOptions)
-    const store: any = useStore()
-
-    const directSpy = jest.fn()
-    const $stateSpy = jest.fn()
-
-    watch(() => store.n, directSpy, { flush: 'sync' })
-    watch(() => store.$state.n, $stateSpy, { flush: 'sync' })
-
-    // simulate a hmr
-    defineStore({
-      ...baseOptions,
-      state: () => ({ newOne: 'hey', n: 0 }),
-    })(null, store)
-
-    expect(directSpy).toHaveBeenCalledTimes(0)
-    expect($stateSpy).toHaveBeenCalledTimes(0)
-
-    store.n++
-    expect(directSpy).toHaveBeenCalledTimes(1)
-    expect($stateSpy).toHaveBeenCalledTimes(1)
-
-    store.$state.n++
-    expect(directSpy).toHaveBeenCalledTimes(2)
-    expect($stateSpy).toHaveBeenCalledTimes(2)
-
-    defineStore({
-      ...baseOptions,
-      state: () => ({ other: 'new', n: 0 }),
-    })(null, store)
-
-    store.n++
-    expect(directSpy).toHaveBeenCalledTimes(3)
-    expect($stateSpy).toHaveBeenCalledTimes(3)
-
-    store.$state.n++
-    expect(directSpy).toHaveBeenCalledTimes(4)
-    expect($stateSpy).toHaveBeenCalledTimes(4)
+  describe('actions', () => {
+    it('adds new actions', () => {
+      const useStore = defineStore(baseOptions)
+      const store: any = useStore()
+
+      // simulate a hmr
+      defineStore({
+        ...baseOptions,
+        actions: {
+          ...baseOptions.actions,
+          decrement() {
+            this.n--
+          },
+        },
+      })(null, store)
+
+      store.increment()
+      expect(store.n).toBe(1)
+      expect(store.$state.n).toBe(1)
+      store.decrement()
+      expect(store.n).toBe(0)
+      expect(store.$state.n).toBe(0)
+
+      defineStore(baseOptions)(null, store)
+
+      store.increment()
+      expect(store.n).toBe(1)
+      expect(store.$state.n).toBe(1)
+      expect(store).not.toHaveProperty('decrement')
+    })
   })
 
-  it.todo('handles nested objects updates')
+  describe('getters', () => {
+    it('adds new getters properties', () => {
+      const useStore = defineStore(baseOptions)
+      const store: any = useStore()
+      expect(store.double).toBe(0)
+
+      // simulate a hmr
+      defineStore({
+        ...baseOptions,
+        getters: {
+          ...baseOptions.getters,
+          triple: (state) => state.n * 3,
+        },
+      })(null, store)
+
+      store.n = 3
+      expect(store.double).toBe(6)
+      expect(store.triple).toBe(9)
+
+      defineStore(baseOptions)(null, store)
+
+      store.n = 4
+      expect(store.double).toBe(8)
+      expect(store).not.toHaveProperty('triple')
+    })
+
+    it('keeps getters reactive', () => {
+      const useStore = defineStore(baseOptions)
+      const store: any = useStore()
+
+      const spy = jest.fn()
+
+      watch(
+        () => {
+          return store.double
+        },
+        spy,
+        { flush: 'sync' }
+      )
+
+      // simulate a hmr
+      defineStore({
+        ...baseOptions,
+        state: () => ({ n: 2, newThing: true }),
+      })(null, store)
+
+      // n isn't changed
+      expect(spy).toHaveBeenCalledTimes(0)
+
+      store.n++
+      // expect(store.double).toBe(6)
+      expect(spy).toHaveBeenCalledTimes(1)
+
+      defineStore(baseOptions)(null, store)
+
+      store.n++
+      // expect(store.double).toBe(8)
+      expect(spy).toHaveBeenCalledTimes(2)
+    })
+  })
 })

diff --git a/src/store.ts b/src/store.ts
index fb6ee7f77a14b9091d9981458e51c3234226d5d3..069374067658ed10890251cb4affd9f3d5503570 100644 (file)
--- a/src/store.ts
+++ b/src/store.ts
@@ -111,11 +111,15 @@ function createOptionsStore<
       localState,
       actions,
       Object.keys(getters || {}).reduce((computedGetters, name) => {
-        computedGetters[name] = computed(() => {
-          setActivePinia(pinia)
-          // @ts-expect-error
-          return store && getters![name].call(store, store)
-        })
+        computedGetters[name] = markRaw(
+          computed(() => {
+            setActivePinia(pinia)
+            // const context = store || ref(localState).value
+            // @ts-expect-error
+            // return getters![name].call(context, context)
+            return store && getters![name].call(store, store)
+          })
+        )
         return computedGetters
       }, {} as Record<string, ComputedRef>)
     )
@@ -470,8 +474,6 @@ function createSetupStore<
         store[stateKey] = toRef(newStore.$state, stateKey)
       })
 
-      pinia.state.value[$id] = toRef(newStore._hmrPayload, 'hotState')
-
       // remove deleted state properties
       Object.keys(store.$state).forEach((stateKey) => {
         if (!(stateKey in newStore.$state)) {
@@ -480,6 +482,8 @@ function createSetupStore<
         }
       })
 
+      pinia.state.value[$id] = toRef(newStore._hmrPayload, 'hotState')
+
       for (const actionName in newStore._hmrPayload.actions) {
         const action: _Method =
           // @ts-expect-error