vuejs / pinia

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
https://pinia.vuejs.org
MIT License
13.06k stars 1.05k forks source link

Error with `createTestingPinia` in vue 2 #827

Closed Djaler closed 2 years ago

Djaler commented 2 years ago

Reproduction

https://stackblitz.com/github/Djaler/pinia-vue-2-test?file=src%2F__tests__%2FApp.spec.js

Steps to reproduce the behavior

  1. Open stackblitz link
  2. Wait for dependencies install
  3. Run npx vue-demi-switch 2 (looks like stackblitz doesn't autorun postinstall)
  4. Run npm run test

Expected behavior

No errors

Actual behavior

Cannot read properties of undefined (reading '__ob__')
TypeError: Cannot read properties of undefined (reading '__ob__')
    at Object.set$1 [as set] (D:\Projects\pinia-vue-2-test\node_modules\@vue\composition-api\dist\vue-composition-api.common.js:1001:21)
    at setup (D:\Projects\pinia-vue-2-test\node_modules\pinia\dist\pinia.cjs:1117:25)
    at D:\Projects\pinia-vue-2-test\node_modules\pinia\dist\pinia.cjs:1356:32
    at EffectScope.Object.<anonymous>.EffectScopeImpl.run (D:\Projects\pinia-vue-2-test\node_modules\@vue\composition-api\dist\vue-composition-api.common.js:201:24)
    at D:\Projects\pinia-vue-2-test\node_modules\pinia\dist\pinia.cjs:1356:22
    at EffectScope.Object.<anonymous>.EffectScopeImpl.run (D:\Projects\pinia-vue-2-test\node_modules\@vue\composition-api\dist\vue-composition-api.common.js:201:24)
    at createSetupStore (D:\Projects\pinia-vue-2-test\node_modules\pinia\dist\pinia.cjs:1354:33)
    at createOptionsStore (D:\Projects\pinia-vue-2-test\node_modules\pinia\dist\pinia.cjs:1145:13)
    at useStore (D:\Projects\pinia-vue-2-test\node_modules\pinia\dist\pinia.cjs:1621:17)
    at setup (D:\Projects\pinia-vue-2-test\src\App.vue:16:1)
    at mergedSetupFn (D:\Projects\pinia-vue-2-test\node_modules\@vue\composition-api\dist\vue-composition-api.common.js:2099:113)
    at mergedSetupFn (D:\Projects\pinia-vue-2-test\node_modules\@vue\composition-api\dist\vue-composition-api.common.js:2099:51)
    at D:\Projects\pinia-vue-2-test\node_modules\@vue\composition-api\dist\vue-composition-api.common.js:1915:23
    at activateCurrentInstance (D:\Projects\pinia-vue-2-test\node_modules\@vue\composition-api\dist\vue-composition-api.common.js:1830:16)
    at initSetup (D:\Projects\pinia-vue-2-test\node_modules\@vue\composition-api\dist\vue-composition-api.common.js:1913:9)
    at VueComponent.wrappedData (D:\Projects\pinia-vue-2-test\node_modules\@vue\composition-api\dist\vue-composition-api.common.js:1896:13)
    at getData (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:4745:17)
    at initData (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:4702:7)
    at initState (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:4641:5)
    at VueComponent.Vue._init (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:5001:5)
    at new VueComponent (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:5148:12)
    at createComponentInstanceForVnode (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:3298:10)
    at init (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:3127:45)
    at createComponent (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:6002:9)
    at createElm (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:5949:9)
    at VueComponent.patch [as __patch__] (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:6499:7)
    at VueComponent.Vue._update (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:3948:19)
    at VueComponent.updateComponent (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:4069:10)
    at Watcher.get (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:4481:25)
    at new Watcher (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:4470:12)
    at mountComponent (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:4076:3)
    at VueComponent.Object.<anonymous>.Vue.$mount (D:\Projects\pinia-vue-2-test\node_modules\vue\dist\vue.runtime.common.dev.js:8436:10)
    at mount (D:\Projects\pinia-vue-2-test\node_modules\@vue\test-utils\dist\vue-test-utils.js:14057:21)
    at Object.<anonymous> (D:\Projects\pinia-vue-2-test\src\__tests__\App.spec.js:10:21)
posva commented 2 years ago

Can you put it in a GitHub repository please?

Djaler commented 2 years ago

It's here https://github.com/Djaler/pinia-vue-2-test. I don't know why stackblitz example was broken :C

Djaler commented 2 years ago

I tried to localize the problem:

Before this call to reactive we have pinia.state as RefImpl https://github.com/posva/pinia/blob/0fa7766dd7fe620e6a38a661d8f423866ee54d8c/packages/pinia/src/store.ts#L420 But after this line pinia.state is just an empty object

Djaler commented 2 years ago

I found it! Here we lost info that pinia should be "raw". https://github.com/posva/pinia/blob/0fa7766dd7fe620e6a38a661d8f423866ee54d8c/packages/testing/src/testing.ts#L96

markRaw from @vue/composition-api stores this info in non-enumerable property __ob__, and because of this we lost it in Object.assign.

posva commented 2 years ago

Nice catch!