From aa16d43d9a11ed47ed5c62501f70c726091a2aa6 Mon Sep 17 00:00:00 2001 From: huangcheng Date: Wed, 2 Nov 2022 20:22:32 +0800 Subject: [PATCH 1/3] fix: return res when is not object --- .../src/useReactive/__tests__/index.test.tsx | 25 +++++++++++++++++++ packages/hooks/src/useReactive/index.ts | 2 +- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/hooks/src/useReactive/__tests__/index.test.tsx b/packages/hooks/src/useReactive/__tests__/index.test.tsx index b2e3f838da..7b82824f74 100644 --- a/packages/hooks/src/useReactive/__tests__/index.test.tsx +++ b/packages/hooks/src/useReactive/__tests__/index.test.tsx @@ -2,6 +2,7 @@ import { fireEvent, render } from '@testing-library/react'; import React from 'react'; import { act } from 'react-dom/test-utils'; import useReactive from '../'; +import { renderHook } from '@testing-library/react-hooks'; const Demo = () => { let state = useReactive({ @@ -163,4 +164,28 @@ describe('test useReactive feature', () => { }); expect(deleteProperty.textContent).toBe(''); }); + + it('access from self to prototype chain', () => { + const parent = { + name: 'parent', + get value() { + return this.name; + }, + }; + + const child: Record = { + name: 'child', + }; + + const { result } = renderHook(() => useReactive(parent)); + const proxy = result.current; + + Object.setPrototypeOf(child, proxy); + + expect(child.value).toBe('child'); + + delete child.name; + + expect(child.value).toBe('parent'); + }); }); diff --git a/packages/hooks/src/useReactive/index.ts b/packages/hooks/src/useReactive/index.ts index 7a0d6e0f11..fbe339478d 100644 --- a/packages/hooks/src/useReactive/index.ts +++ b/packages/hooks/src/useReactive/index.ts @@ -25,7 +25,7 @@ function observer>(initialVal: T, cb: () => void): const proxy = new Proxy(initialVal, { get(target, key, receiver) { const res = Reflect.get(target, key, receiver); - return isObject(res) ? observer(res, cb) : Reflect.get(target, key); + return isObject(res) ? observer(res, cb) : res; }, set(target, key, val) { const ret = Reflect.set(target, key, val); From a14b9b6c3b6a22df114df71fd2ba1cf2fed35094 Mon Sep 17 00:00:00 2001 From: huangcheng Date: Wed, 2 Nov 2022 20:23:27 +0800 Subject: [PATCH 2/3] style: use const instead of let --- .../src/useReactive/__tests__/index.test.tsx | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/hooks/src/useReactive/__tests__/index.test.tsx b/packages/hooks/src/useReactive/__tests__/index.test.tsx index 7b82824f74..673042fdbc 100644 --- a/packages/hooks/src/useReactive/__tests__/index.test.tsx +++ b/packages/hooks/src/useReactive/__tests__/index.test.tsx @@ -5,7 +5,7 @@ import useReactive from '../'; import { renderHook } from '@testing-library/react-hooks'; const Demo = () => { - let state = useReactive({ + const state = useReactive({ count: 0, val: { val1: { @@ -79,11 +79,11 @@ const Demo = () => { describe('test useReactive feature', () => { it('test count ', () => { - let wrap = render(); + const wrap = render(); - let count = wrap.getByRole('addCount'); - let addCountBtn = wrap.getByRole('addCountBtn'); - let subCountBtn = wrap.getByRole('subCountBtn'); + const count = wrap.getByRole('addCount'); + const addCountBtn = wrap.getByRole('addCountBtn'); + const subCountBtn = wrap.getByRole('subCountBtn'); act(() => { fireEvent.click(addCountBtn); @@ -112,12 +112,12 @@ describe('test useReactive feature', () => { }); it('test array', () => { - let wrap = render(); - let testArray = wrap.getByRole('test-array'); - let pushbtn = wrap.getByRole('pushbtn'); - let popbtn = wrap.getByRole('popbtn'); - let shiftbtn = wrap.getByRole('shiftbtn'); - let unshiftbtn = wrap.getByRole('unshiftbtn'); + const wrap = render(); + const testArray = wrap.getByRole('test-array'); + const pushbtn = wrap.getByRole('pushbtn'); + const popbtn = wrap.getByRole('popbtn'); + const shiftbtn = wrap.getByRole('shiftbtn'); + const unshiftbtn = wrap.getByRole('unshiftbtn'); act(() => { fireEvent.click(pushbtn); }); @@ -137,10 +137,10 @@ describe('test useReactive feature', () => { }); it('test input1', () => { - let wrap = render(); + const wrap = render(); - let input = wrap.getByRole('input1'); - let inputVal = wrap.getByRole('inputVal1'); + const input = wrap.getByRole('input1'); + const inputVal = wrap.getByRole('inputVal1'); act(() => { fireEvent.change(input, { target: { value: 'a' } }); }); @@ -153,10 +153,10 @@ describe('test useReactive feature', () => { }); it('delete object property', () => { - let wrap = render(); + const wrap = render(); - let deleteProperty = wrap.getByRole('deleteProperty'); - let deletePropertyBtn = wrap.getByRole('deletePropertyBtn'); + const deleteProperty = wrap.getByRole('deleteProperty'); + const deletePropertyBtn = wrap.getByRole('deletePropertyBtn'); expect(deleteProperty.textContent).toBe('foo'); act(() => { From 0170f8686e6b98fdb56ab344f62f76a4719dacec Mon Sep 17 00:00:00 2001 From: huangcheng Date: Thu, 3 Nov 2022 10:46:04 +0800 Subject: [PATCH 3/3] style: re-import renderHook and act --- packages/hooks/src/useReactive/__tests__/index.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/hooks/src/useReactive/__tests__/index.test.tsx b/packages/hooks/src/useReactive/__tests__/index.test.tsx index 8524c33bcf..d1c1343653 100644 --- a/packages/hooks/src/useReactive/__tests__/index.test.tsx +++ b/packages/hooks/src/useReactive/__tests__/index.test.tsx @@ -1,8 +1,6 @@ -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, render, renderHook, act } from '@testing-library/react'; import React from 'react'; -import { act } from 'react-dom/test-utils'; import useReactive from '../'; -import { renderHook } from '@testing-library/react-hooks'; const Demo = () => { const state: {