diff --git a/scripts/__tests__/ComponentTest/HooksExceptEffectAndState.test.js b/scripts/__tests__/ComponentTest/HooksExceptEffectAndState.test.js new file mode 100644 index 00000000..34bb86d0 --- /dev/null +++ b/scripts/__tests__/ComponentTest/HooksExceptEffectAndState.test.js @@ -0,0 +1,249 @@ +import * as React from '../../../libs/horizon/src/external/Horizon'; +import * as HorizonDOM from '../../../libs/horizon/src/dom/DOMExternal'; +import * as LogUtils from '../jest/logUtils'; +import { act } from '../jest/customMatcher'; + +describe('Hook Test', () => { + const { useMemo, useRef, useState, useImperativeHandle, forwardRef, useLayoutEffect, useEffect } = React; + const { unmountComponentAtNode } = HorizonDOM; + let container = null; + beforeEach(() => { + LogUtils.clear(); + // 创建一个 DOM 元素作为渲染目标 + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(() => { + // 退出时进行清理 + unmountComponentAtNode(container); + container.remove(); + container = null; + LogUtils.clear(); + }); + + const Text = (props) => { + LogUtils.log(props.text); + return

{props.text}

; + } + + describe('useLayoutEffect Test', () => { + it('useLayoutEffect的触发时序', () => { + const App = (props) => { + useLayoutEffect(() => { + LogUtils.log('LayoutEffect'); + }); + return ; + } + HorizonDOM.render(, container, () => LogUtils.log('Sync effect')); + expect(LogUtils.getAndClear()).toEqual([ + 1, + // 同步在渲染之后 + 'LayoutEffect', + 'Sync effect' + ]); + expect(container.querySelector('p').innerHTML).toBe('1'); + // 更新 + HorizonDOM.render(, container, () => LogUtils.log('Sync effect')); + expect(LogUtils.getAndClear()).toEqual([ + 2, + 'LayoutEffect', + 'Sync effect' + ]); + expect(container.querySelector('p').innerHTML).toBe('2'); + }); + + it('创建,销毁useLayoutEffect', () => { + const App = (props) => { + useEffect(() => { + LogUtils.log(`num effect [${props.num}]`); + return () => { + LogUtils.log('num effect destroy'); + }; + }, [props.num]); + useLayoutEffect(() => { + LogUtils.log(`num Layouteffect [${props.num}]`); + return () => { + LogUtils.log(`num [${props.num}] Layouteffect destroy`); + }; + }, [props.num]); + return ; + } + + act(() => { + HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + expect(LogUtils.getAndClear()).toEqual([ + 'num: 0', + 'num Layouteffect [0]', + 'callback effect' + ]); + expect(container.textContent).toBe('num: 0'); + }) + + // 更新 + act(() => { + HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + }) + expect(LogUtils.getAndClear()).toEqual([ + // 异步effect + 'num effect [0]', + 'num: 1', + // 旧Layouteffect销毁 + 'num [0] Layouteffect destroy', + // 新Layouteffect建立 + 'num Layouteffect [1]', + 'callback effect', + // 异步旧的effect销毁 + 'num effect destroy', + // 异步新的effect建立 + 'num effect [1]' + ]); + + act(() => { + HorizonDOM.render(null, container, () => LogUtils.log('callback effect')); + }) + expect(LogUtils.getAndClear()).toEqual([ + // 同步Layouteffect销毁 + 'num [1] Layouteffect destroy', + 'callback effect', + // 最后执行异步effect销毁 + 'num effect destroy', + ]); + }); + }) + + describe('useMemo Test', () => { + it('触发useMemo', () => { + const App = (props) => { + const num = useMemo(() => { + LogUtils.log(props._num); + return props._num + 1; + }, [props._num]); + return ; + } + HorizonDOM.render(, container); + expect(LogUtils.getAndClear()).toEqual([ + 0, + 1 + ]); + expect(container.textContent).toBe('1'); + + HorizonDOM.render(, container); + expect(LogUtils.getAndClear()).toEqual([ + 1, + 2 + ]); + expect(container.textContent).toBe('2'); + + HorizonDOM.render(, container); + // 不会触发useMemo + expect(LogUtils.getAndClear()).toEqual([2]); + expect(container.textContent).toBe('2'); + + HorizonDOM.render(, container); + expect(LogUtils.getAndClear()).toEqual([ + 2, + 3 + ]); + expect(container.textContent).toBe('3'); + }); + + it('输入不变,重新渲染也会触发useMemo', () => { + const App = (props) => { + const num = useMemo(props._num); + return ; + } + + const num1 = () => { + LogUtils.log('num 1'); + return 1; + } + + const num2 = () => { + LogUtils.log('num 2'); + return 2; + } + + HorizonDOM.render(, container); + expect(LogUtils.getAndClear()).toEqual(['num 1', 1]); + + HorizonDOM.render(, container); + expect(LogUtils.getAndClear()).toEqual(['num 1', 1]); + + HorizonDOM.render(, container); + expect(LogUtils.getAndClear()).toEqual(['num 1', 1]); + + HorizonDOM.render(, container); + expect(LogUtils.getAndClear()).toEqual(['num 2', 2]); + }); + }) + + describe('useRef Test', () => { + it('更新current值时不会re-render', () => { + const App = () => { + const ref = useRef(1); + return ( + <> + + ; + + ) + + } + HorizonDOM.render(, container); + expect(LogUtils.getAndClear()).toEqual([1]); + expect(container.querySelector('p').innerHTML).toBe('1'); + // 点击按钮触发ref.current加1 + container.querySelector('button').click(); + // ref.current改变不会触发重新渲染 + expect(LogUtils.getAndClear()).toEqual([]); + expect(container.querySelector('p').innerHTML).toBe('1'); + }); + }) + + describe('useImperativeHandle Test', () => { + it('useImperativeHandle没有配置dep时自动更新', () => { + + let App = (props, ref) => { + const [num, setNum] = useState(0); + useImperativeHandle(ref, () => ({ num, setNum })); + return ; + } + let App1 = (props, ref) => { + const [num1, setNum1] = useState(0); + useImperativeHandle(ref, () => ({ num1, setNum1 }), []); + return ; + } + + App = forwardRef(App); + App1 = forwardRef(App1); + const counter = React.createRef(null); + const counter1 = React.createRef(null); + HorizonDOM.render(, container); + expect(LogUtils.getAndClear()).toEqual([0]); + expect(counter.current.num).toBe(0); + act(() => { + counter.current.setNum(1); + }); + expect(LogUtils.getAndClear()).toEqual([1]); + // useImperativeHandle没有配置的dep,所以会自动更新 + expect(counter.current.num).toBe(1); + // 清空container + unmountComponentAtNode(container); + + HorizonDOM.render(, container); + expect(LogUtils.getAndClear()).toEqual([0]); + expect(counter1.current.num1).toBe(0); + act(() => { + counter1.current.setNum1(1); + }); + expect(LogUtils.getAndClear()).toEqual([1]); + // useImperativeHandle的dep为[],所以不会变 + expect(counter1.current.num1).toBe(0); + }); + }) +}) diff --git a/scripts/__tests__/ComponentTest/UseEffect.test.js b/scripts/__tests__/ComponentTest/UseEffect.test.js index 0eccd5f9..1a0631fe 100644 --- a/scripts/__tests__/ComponentTest/UseEffect.test.js +++ b/scripts/__tests__/ComponentTest/UseEffect.test.js @@ -4,7 +4,7 @@ import * as LogUtils from '../jest/logUtils'; import { act } from '../jest/customMatcher'; describe('useEffect Hook Test', () => { - const { useEffect, useLayoutEffect, useState, memo } = React; + const { useEffect, useLayoutEffect, useState, memo, forwardRef, useImperativeHandle } = React; const { unmountComponentAtNode } = HorizonDOM; let container = null; beforeEach(() => { @@ -27,6 +27,30 @@ describe('useEffect Hook Test', () => { return

{props.text}

; } + it('act方法', () => { + const App = () => { + return ; + } + + act(() => { + HorizonDOM.render(, container, () => { + LogUtils.log('num effect'); + }); + // 第一次渲染为同步,所以同步执行的可以写在act里做判断 + expect(LogUtils.getAndClear()).toEqual(['op', 'num effect']); + expect(container.textContent).toBe('op'); + }); + act(() => { + HorizonDOM.render(null, container, () => { + LogUtils.log('num effect89'); + }); + // 第二次渲染为异步,所以同步执行的不可以写在act里做判断,act里拿到的为空数组 + expect(LogUtils.getAndClear()).toEqual([]); + }); + expect(LogUtils.getAndClear()).toEqual(['num effect89']); + expect(container.textContent).toBe(''); + }); + it('兄弟节点被删除,useEffect依然正常', () => { const App = () => { return ; @@ -123,13 +147,19 @@ describe('useEffect Hook Test', () => { HorizonDOM.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']); expect(container.textContent).toEqual('num: 0'); - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); - // 执行新的render前,会执行旧render的useEffect,所以会添加'First effect [0]' - expect(LogUtils.getAndClear()).toEqual(['First effect [0]', 'num: 1', 'callback effect']); - expect(container.textContent).toEqual('num: 1'); }) - // 最后在act执行完后会执行新render的useEffect - expect(LogUtils.getAndClear()).toEqual(['First effect [1]']); + expect(LogUtils.getAndClear()).toEqual(['First effect [0]']); + act(() => { + HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + + }) + // 此时异步执行,act执行完后会执行新render的useEffect + expect(LogUtils.getAndClear()).toEqual([ + 'num: 1', + 'callback effect', + 'First effect [1]' + ]); + expect(container.textContent).toEqual('num: 1'); }); it('混合使用useEffect', () => { @@ -150,10 +180,16 @@ describe('useEffect Hook Test', () => { expect(LogUtils.getAndClear()).toEqual(['First effect [0]', 'Second effect [0]']); act(() => { HorizonDOM.render(, container, () => LogUtils.log('callback effect')); - expect(LogUtils.getAndClear()).toEqual(['num: 1', 'callback effect']); - expect(container.textContent).toEqual('num: 1'); }) - expect(LogUtils.getAndClear()).toEqual(['First effect [1]', 'Second effect [1]']); + // 第二次render时异步执行,act保证所有效果都已更新,所以先常规记录日志 + // 然后记录useEffect的日志 + expect(LogUtils.getAndClear()).toEqual([ + 'num: 1', + 'callback effect', + 'First effect [1]', + 'Second effect [1]' + ]); + expect(container.textContent).toEqual('num: 1'); }); it('创建,销毁useEffect', () => { @@ -202,14 +238,13 @@ describe('useEffect Hook Test', () => { act(() => { // 此时word改变,num不变 HorizonDOM.render(, container, () => LogUtils.log('callback effect')); - expect(LogUtils.getAndClear()).toEqual([ - 'num: 0,word: React', - 'word Layouteffect destroy', - 'word Layouteffect [React]', - 'callback effect' - ]); }); expect(LogUtils.getAndClear()).toEqual([ + 'num: 0,word: React', + 'word Layouteffect destroy', + 'word Layouteffect [React]', + 'callback effect', + // 最后执行异步的 'word effect destroy', 'word effect [React]', ]); @@ -217,13 +252,12 @@ describe('useEffect Hook Test', () => { act(() => { // 此时num和word的所有effect都销毁 HorizonDOM.render(null, container, () => LogUtils.log('callback effect')); - expect(LogUtils.getAndClear()).toEqual([ - 'num Layouteffect destroy', - 'word Layouteffect destroy', - 'callback effect' - ]); }); expect(LogUtils.getAndClear()).toEqual([ + 'num Layouteffect destroy', + 'word Layouteffect destroy', + 'callback effect', + // 最后执行异步useEffect 'num effect destroy', 'word effect destroy', ]); @@ -254,27 +288,26 @@ describe('useEffect Hook Test', () => { act(() => { HorizonDOM.render(, container, () => LogUtils.log('callback effect')); - expect(LogUtils.getAndClear()).toEqual([ - 'num: 1', - 'callback effect' - ]); - expect(container.textContent).toEqual('num: 1'); }); expect(LogUtils.getAndClear()).toEqual([ + 'num: 1', + 'callback effect', + // 最后执行异步 'num effect destroy', 'num effect [1]', ]); + expect(container.textContent).toEqual('num: 1'); + expect(LogUtils.getAndClear()).toEqual([]); act(() => { HorizonDOM.render(null, container, () => LogUtils.log('callback effect')); - expect(LogUtils.getAndClear()).toEqual([ - 'callback effect' - ]); - expect(container.textContent).toEqual(''); }); expect(LogUtils.getAndClear()).toEqual([ + 'callback effect', 'num effect destroy' ]); + expect(container.textContent).toEqual(''); + expect(LogUtils.getAndClear()).toEqual([]); }); it('销毁依赖空数组的useEffect', () => { @@ -302,25 +335,24 @@ describe('useEffect Hook Test', () => { act(() => { HorizonDOM.render(, container, () => LogUtils.log('callback effect')); - expect(LogUtils.getAndClear()).toEqual([ - 'num: 1', - 'callback effect' - ]); - expect(container.textContent).toEqual('num: 1'); }); - // 没有执行useEffect + expect(LogUtils.getAndClear()).toEqual([ + 'num: 1', + 'callback effect' + // 依赖空数组,没有执行useEffect + ]); + expect(container.textContent).toEqual('num: 1'); expect(LogUtils.getAndClear()).toEqual([]); act(() => { HorizonDOM.render(null, container, () => LogUtils.log('callback effect')); - expect(LogUtils.getAndClear()).toEqual([ - 'callback effect' - ]); - expect(container.textContent).toEqual(''); }); expect(LogUtils.getAndClear()).toEqual([ + 'callback effect', 'num effect destroy' ]); + expect(container.textContent).toEqual(''); + expect(LogUtils.getAndClear()).toEqual([]); }); it('useEffect里使用useState(1', () => { @@ -354,11 +386,12 @@ describe('useEffect Hook Test', () => { act(() => { setNum(); - expect(LogUtils.getAndClear()).toEqual([ - 'num: 1' - ]); }); - expect(LogUtils.getAndClear()).toEqual(['num effect [1]']); + expect(LogUtils.getAndClear()).toEqual([ + 'num: 1', + 'num effect [1]' + ]); + expect(LogUtils.getAndClear()).toEqual([]); }); it('useEffect里使用useState(2', () => { @@ -389,7 +422,7 @@ describe('useEffect Hook Test', () => { expect(container.textContent).toEqual('Num: 1'); }); - it('useEffect与memo一起使用', () => { + it('useEffect与memo一起使用(1', () => { let setNum; const App = memo(() => { const [num, _setNum] = useState(0); @@ -415,28 +448,284 @@ describe('useEffect Hook Test', () => { // 不会重新渲染 act(() => { HorizonDOM.render(, container, () => LogUtils.log('callback effect')); - expect(LogUtils.getAndClear()).toEqual(['callback effect']); - expect(container.textContent).toEqual('0'); }); + expect(LogUtils.getAndClear()).toEqual(['callback effect']); + expect(container.textContent).toEqual('0'); expect(LogUtils.getAndClear()).toEqual([]); // 会重新渲染 act(() => { setNum(1); - expect(LogUtils.getAndClear()).toEqual([1]); - expect(container.textContent).toEqual('1'); }); expect(LogUtils.getAndClear()).toEqual([ + 1, 'num effect destroy 0', 'num effect [1]' ]); + expect(container.textContent).toEqual('1'); + expect(LogUtils.getAndClear()).toEqual([]); act(() => { HorizonDOM.render(null, container, () => LogUtils.log('callback effect')); - expect(LogUtils.getAndClear()).toEqual(['callback effect']); - expect(container.textContent).toEqual(''); }); - expect(LogUtils.getAndClear()).toEqual(['num effect destroy 1']); + expect(LogUtils.getAndClear()).toEqual([ + 'callback effect', + 'num effect destroy 1' + ]); + expect(container.textContent).toEqual(''); + expect(LogUtils.getAndClear()).toEqual([]); }); + it('useEffect与memo一起使用(2', () => { + const compare = (prevProps, nextProps) => prevProps.num === nextProps.num; + const App = memo((props) => { + useEffect(() => { + LogUtils.log(`num effect [${props.num}]`); + return () => { + LogUtils.log(`num effect destroy ${props.num}`); + }; + }); + return ; + }, compare) + act(() => { + HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + expect(LogUtils.getAndClear()).toEqual([ + 0, + 'callback effect' + ]); + expect(container.textContent).toEqual('0'); + }); + expect(LogUtils.getAndClear()).toEqual(['num effect [0]']); + + // 不会重新渲染 + act(() => { + HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + }); + expect(LogUtils.getAndClear()).toEqual(['callback effect']); + expect(container.textContent).toEqual('0'); + expect(LogUtils.getAndClear()).toEqual([]); + + // 会重新渲染 + act(() => { + HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + }); + expect(LogUtils.getAndClear()).toEqual([ + 1, + 'callback effect', + // 执行异步,先清除旧的,再执行新的 + 'num effect destroy 0', + 'num effect [1]' + ]); + expect(container.textContent).toEqual('1'); + expect(LogUtils.getAndClear()).toEqual([]); + + act(() => { + HorizonDOM.render(null, container, () => LogUtils.log('callback effect')); + }); + expect(LogUtils.getAndClear()).toEqual(['callback effect', 'num effect destroy 1']); + expect(container.textContent).toEqual(''); + expect(LogUtils.getAndClear()).toEqual([]); + }); + + it('useEffect处理错误', () => { + const App = (props) => { + useEffect(() => { + LogUtils.log('throw Error'); + throw new Error('mistake'); + // eslint-disable-next-line no-unreachable + LogUtils.log(`Mount with [${props.num}]`); + return () => { + LogUtils.log(`Unmount with [${props.num}]`); + }; + }); + return ; + } + act(() => { + HorizonDOM.render(, container, () => + LogUtils.log('Sync effect'), + ); + expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'Sync effect']); + expect(container.textContent).toEqual('Number: 0'); + }); + // 处理错误,不会向下执行LogUtils.log(`Mount with [${props.num}]`); + expect(LogUtils.getAndClear()).toEqual(['throw Error']); + + act(() => { + HorizonDOM.render(null, container, () => + LogUtils.log('Sync effect'), + ); + }); + expect(LogUtils.getAndClear()).toEqual([ + 'Sync effect', + // 不会处理卸载部分 LogUtils.log(`Unmount with [${props.num}]`); + ]); + expect(container.textContent).toEqual(''); + expect(LogUtils.getAndClear()).toEqual([]); + }); + + it('卸载useEffect', () => { + const App = (props) => { + useEffect(() => { + LogUtils.log(`num effect [${props.num}]`); + return () => { + LogUtils.log(`num effect destroy ${props.num}`); + }; + }, []); + if (props.num < 0) { + useEffect(() => { + LogUtils.log(`New num effect [${props.num}]`); + return () => { + LogUtils.log(`New num effect destroy ${props.num}`); + }; + }, []); + } + return ; + } + + act(() => { + HorizonDOM.render(, container, () => LogUtils.log('num effect')); + expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']); + expect(container.textContent).toBe('Number: 0'); + }); + expect(LogUtils.getAndClear()).toEqual(['num effect [0]']); + + act(() => { + HorizonDOM.render(null, container, () => LogUtils.log('num effect')); + }); + expect(LogUtils.getAndClear()).toEqual(['num effect', 'num effect destroy 0']); + expect(container.textContent).toBe(''); + expect(LogUtils.getAndClear()).toEqual([]); + }); + + it('同步刷新不会导致effect执行', () => { + let setNum; + const App = () => { + const [num, _setNum] = useState(0); + setNum = _setNum; + useEffect(() => { + LogUtils.log(`num effect [${num}]`); + _setNum(1); + }, []); + return ; + } + + HorizonDOM.render(, container, () => LogUtils.log('num effect')); + expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']); + expect(container.textContent).toBe('Number: 0'); + + act(() => { + // 模拟同步刷新 + (function () { + setNum(2); + })(); + }); + expect(LogUtils.getAndClear()).toEqual(['num effect [0]', 'Number: 1']); + expect(container.textContent).toBe('Number: 1'); + expect(LogUtils.getAndClear()).toEqual([]); + }); + + it('当组件的更新方法在卸载函数中,组件更新不会告警', () => { + const App = () => { + LogUtils.log('useEffect'); + const [num, setNum] = useState(0); + useEffect(() => { + LogUtils.log('effect'); + return () => { + setNum(1); + LogUtils.log('effect destroy'); + }; + }, []); + return num; + } + + act(() => { + HorizonDOM.render(, container, () => LogUtils.log('num effect')); + expect(LogUtils.getAndClear()).toEqual(['useEffect', 'num effect']); + }); + expect(LogUtils.getAndClear()).toEqual(['effect']); + + act(() => { + HorizonDOM.render(null, container); + }); + // 不会处理setNum(1) + expect(LogUtils.getAndClear()).toEqual(['effect destroy']); + }); + + it('当组件的更新方法在卸载函数中,组件的子组件更新不会告警', () => { +const App = () => { + LogUtils.log('App'); + const appRef = React.createRef(null); + useEffect(() => { + LogUtils.log('App effect'); + return () => { + appRef.current(1); + LogUtils.log('App effect destroy'); + }; + }, []); + return ; + } + + let AppChild = (props, ref) => { + LogUtils.log('AppChild') + const [num, setNum] = useState(0); + useEffect(() => { + LogUtils.log('Child effect'); + ref.current = setNum; + }, []); + return num; + } + AppChild = forwardRef(AppChild); + + act(() => { + HorizonDOM.render(, container, () => LogUtils.log('num effect')); + expect(LogUtils.getAndClear()).toEqual([ + 'App', + 'AppChild', + 'num effect' + ]); + }); + expect(LogUtils.getAndClear()).toEqual(['Child effect','App effect']); + + act(() => { + HorizonDOM.render(null, container); + }); + // 销毁时执行appRef.current(1)不会报错 + expect(LogUtils.getAndClear()).toEqual(['App effect destroy']); + }); + + it('当组件的更新方法在卸载函数中,组件的父组件更新不会告警', () => { + const App = () => { + LogUtils.log('App'); + const [num, setNum] = useState(0); + return ; + } + + let AppChild = (props) => { + LogUtils.log('AppChild') + useEffect(() => { + LogUtils.log('Child effect'); + return () => { + LogUtils.log('Child effect destroy'); + props.setNum(1); + }; + }, []); + return props.num; + } + + act(() => { + HorizonDOM.render(, container, () => LogUtils.log('num effect')); + expect(LogUtils.getAndClear()).toEqual([ + 'App', + 'AppChild', + 'num effect' + ]); + }); + expect(LogUtils.getAndClear()).toEqual(['Child effect']); + + act(() => { + HorizonDOM.render(null, container); + }); + // 销毁时执行 props.setNum(1);不会报错 + expect(LogUtils.getAndClear()).toEqual(['Child effect destroy']); + }); }) diff --git a/scripts/__tests__/ComponentTest/UseState.test.js b/scripts/__tests__/ComponentTest/UseState.test.js index ffd1cda0..02c3996f 100644 --- a/scripts/__tests__/ComponentTest/UseState.test.js +++ b/scripts/__tests__/ComponentTest/UseState.test.js @@ -1,6 +1,7 @@ import * as React from '../../../libs/horizon/src/external/Horizon'; import * as HorizonDOM from '../../../libs/horizon/src/dom/DOMExternal'; import * as LogUtils from '../jest/logUtils'; +import { act } from '../jest/customMatcher'; describe('useState Hook Test', () => { const { useState, forwardRef, useImperativeHandle, memo } = React; @@ -126,4 +127,45 @@ describe('useState Hook Test', () => { expect(LogUtils.getAndClear()).toEqual([1]); expect(container.querySelector('p').innerHTML).toBe('1'); }); + + it('卸载useState', () => { + let updateA; + let updateB; + let updateC; + + const App = (props) => { + const [A, _updateA] = useState(0); + const [B, _updateB] = useState(0); + updateA = _updateA; + updateB = _updateB; + + let C; + if (props.loadC) { + const [_C, _updateC] = useState(0); + C = _C; + updateC = _updateC; + } else { + C = '[not loaded]'; + } + + return ; + } + + HorizonDOM.render(, container); + expect(LogUtils.getAndClear()).toEqual(['A: 0, B: 0, C: 0']); + expect(container.textContent).toBe('A: 0, B: 0, C: 0'); + act(() => { + updateA(2); + updateB(3); + updateC(4); + }); + expect(LogUtils.getAndClear()).toEqual(['A: 2, B: 3, C: 4']); + expect(container.textContent).toBe('A: 2, B: 3, C: 4'); + + expect(() => { + HorizonDOM.render(, container); + }).toThrow( + 'Hooks are less than expected, please check whether the hook is written in the condition.', + ); + }); }); diff --git a/scripts/__tests__/jest/customMatcher.js b/scripts/__tests__/jest/customMatcher.js index f921e916..c373fbd5 100644 --- a/scripts/__tests__/jest/customMatcher.js +++ b/scripts/__tests__/jest/customMatcher.js @@ -1,5 +1,7 @@ -import { runAsyncEffects } from '../../../libs/horizon/src/renderer/submit/HookEffectHandler'; +import { runAsyncEffects, callUseEffects } from '../../../libs/horizon/src/renderer/submit/HookEffectHandler'; import { callRenderQueueImmediate } from '../../../libs/horizon/src/renderer/taskExecutor/RenderQueue'; +import { asyncUpdates } from '../../../libs/horizon/src/renderer/TreeBuilder'; +import { runAsync } from '../../../libs/horizon/src/renderer/taskExecutor/TaskExecutor'; function runAssertion(fn) { try { @@ -21,7 +23,7 @@ function toMatchValue(LogUtils, expectedValues) { } const act = (fun) => { - fun(); + asyncUpdates(fun); callRenderQueueImmediate(); runAsyncEffects(); }