test: simplify test case (#38374)

components/anchor/__tests__/cached-context.test.tsx

@@ -1,53 +1,40 @@
-import React, { memo, useContext, useRef, useState } from 'react';
-import { fireEvent, getNodeText, render } from '../../../tests/utils';
+import React, { memo, useContext } from 'react';
+import { fireEvent, pureRender } from '../../../tests/utils';
 import Anchor from '../Anchor';
 import AnchorContext from '../context';
 
+let innerCount = 0;
+let outerCount = 0;
+
+const handleClick = () => {
+  outerCount++;
+};
+
 // we use'memo' here in order to only render inner component while context changed.
-const CacheInner = memo(() => {
-  const countRef = useRef(0);
-  countRef.current++;
-  // subscribe anchor context
+const CacheInner: React.FC = memo(() => {
+  innerCount++;
+  // subscribe locale context
   useContext(AnchorContext);
-  return (
-    <div>
-      Child Rendering Count: <span id="child_count">{countRef.current}</span>
-    </div>
-  );
+  return null;
 });
 
-const CacheOuter = () => {
-  // We use 'useState' here in order to trigger parent component rendering.
-  const [count, setCount] = useState(1);
-  const handleClick = () => {
-    setCount(count + 1);
-  };
-  // During each rendering phase, the cached context value returned from method 'Anchor#getMemoizedContextValue' will take effect.
-  // So 'CacheInner' component won't rerender.
-  return (
-    <div>
+const CacheOuter: React.FC = memo(() => (
+  <>
     <button type="button" onClick={handleClick} id="parent_btn">
       Click
     </button>
-      Parent Rendering Count: <span id="parent_count">{count}</span>
     <Anchor affix={false}>
       <CacheInner />
     </Anchor>
-    </div>
-  );
-};
-
-it("Rendering on Anchor without changed AnchorContext won't trigger rendering on child component.", () => {
-  const { container } = render(<CacheOuter />);
-  const childCount = getNodeText(container.querySelector('#child_count')!);
-
-  fireEvent.click(container.querySelector('#parent_btn')!);
+  </>
+));
 
-  expect(getNodeText(container.querySelector('#parent_count')!)).toBe('2');
-  // child component won't rerender
-  expect(getNodeText(container.querySelector('#child_count')!)).toBe(childCount);
+it("Rendering on Anchor without changed won't trigger rendering on child component.", () => {
+  const { container, unmount } = pureRender(<CacheOuter />);
+  expect(outerCount).toBe(0);
+  expect(innerCount).toBe(2);
   fireEvent.click(container.querySelector('#parent_btn')!);
-  expect(getNodeText(container.querySelector('#parent_count')!)).toBe('3');
-  // child component won't rerender
-  expect(getNodeText(container.querySelector('#child_count')!)).toBe(childCount);
+  expect(outerCount).toBe(1);
+  expect(innerCount).toBe(2);
+  unmount();
 });