From 748695220c21f602a463a9b2b009c465818c9e5a Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 19 Apr 2021 18:07:15 +1000
Subject: [PATCH] fix: make data mounting option reactive (#540)

Fixes #538
---
 src/dataMixin.ts      |  7 +++++--
 src/mount.ts          |  1 -
 tests/setData.spec.ts | 42 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/dataMixin.ts b/src/dataMixin.ts
index 52daf8ff3..b67dbb92a 100644
--- a/src/dataMixin.ts
+++ b/src/dataMixin.ts
@@ -1,10 +1,13 @@
-import { getCurrentInstance } from 'vue'
+import { getCurrentInstance, reactive } from 'vue'
 
 export const createDataMixin = (data: Record<string, unknown>) => {
   return {
     created() {
       for (const [k, v] of Object.entries(data)) {
-        getCurrentInstance()!.data = { ...getCurrentInstance()!.data, [k]: v }
+        getCurrentInstance()!.data = reactive({
+          ...getCurrentInstance()!.data,
+          [k]: v
+        })
       }
     }
   }
diff --git a/src/mount.ts b/src/mount.ts
index b7b679b88..3182c559f 100644
--- a/src/mount.ts
+++ b/src/mount.ts
@@ -35,7 +35,6 @@ import { attachEmitListener } from './emit'
 import { createDataMixin } from './dataMixin'
 import { MOUNT_COMPONENT_REF, MOUNT_PARENT_NAME } from './constants'
 import { createStub, stubComponents } from './stubs'
-import { hyphenate } from './utils/vueShared'
 
 // NOTE this should come from `vue`
 type PublicProps = VNodeProps & AllowedComponentProps & ComponentCustomProps
diff --git a/tests/setData.spec.ts b/tests/setData.spec.ts
index f7fcbd0a6..fe212e055 100644
--- a/tests/setData.spec.ts
+++ b/tests/setData.spec.ts
@@ -123,4 +123,46 @@ describe('setData', () => {
       'Cannot add property count'
     )
   })
+
+  // https://github.com/vuejs/vue-test-utils-next/issues/538
+  it('updates data set via data mounting option using setData', async () => {
+    const Comp = defineComponent<
+      {},
+      {},
+      { field: number | null },
+      { isFieldNull: any }
+    >({
+      template: `
+        <div>{{ isFieldNull ? 'It is null' : 'It is not null' }}</div> 
+      `,
+      data() {
+        return {
+          field: null
+        }
+      },
+      computed: {
+        isFieldNull() {
+          return this.field === null
+        }
+      }
+    })
+
+    const wrapper = mount(Comp, {
+      data() {
+        return {
+          field: null
+        }
+      }
+    })
+
+    expect(wrapper.vm.isFieldNull).toBe(true)
+    expect(wrapper.html()).toContain('It is null')
+
+    await wrapper.setData({ field: 10 })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toContain('It is not null')
+    expect(wrapper.vm.field).toEqual(10)
+    expect(wrapper.vm.isFieldNull).toBe(false)
+  })
 })