ant-design/components/menu/__tests__/cached-context.test.tsx
叶枫 502dac12aa
docs: format code (#48309)
* docs: fix code

* feat: lint

* feat: prettier

* feat: test

* feat: review

* feat: format html

* feat: format html
2024-04-08 14:04:08 +08:00

44 lines
1.1 KiB
TypeScript

import React, { memo, useContext } from 'react';
import { fireEvent, pureRender } from '../../../tests/utils';
import Menu from '../index';
import MenuContext from '../MenuContext';
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: React.FC = memo(() => {
innerCount++;
// subscribe locale context
useContext(MenuContext);
return null;
});
const CacheOuter: React.FC = memo(() => (
<>
<button type="button" onClick={handleClick} id="parent_btn">
Click
</button>
<Menu>
<Menu.Item key="test">
<CacheInner />
</Menu.Item>
</Menu>
</>
));
it("Rendering on Menu without changed MenuContext won't trigger rendering on child component.", () => {
const { container, unmount } = pureRender(<CacheOuter />);
expect(outerCount).toBe(0);
expect(innerCount).toBe(1);
fireEvent.click(container.querySelector('#parent_btn')!);
expect(outerCount).toBe(1);
expect(innerCount).toBe(1);
unmount();
});