ant-design/components/config-provider/__tests__/memo.test.tsx
lijianan db0344c85f
test: migrate part of ConfigProvider tests (#37142)
* test: migrate part of ConfigProvider tests

* test: migrate part of ConfigProvider tests

* test: update snap

* test: update snap

* test: migrate part of ConfigProvider tests

* fix: commented error case

* chore: update snapshot name

* test: csp test case

* test: revert test case

* test: Update snapshot

* test: Update ser logic

* test: more cov

* test: cascader snapshit

* test: update match

* test: more detact

* test: more handler

* chore: Update snapshot

* test: Table test case

Co-authored-by: 二货机器人 <smith3816@gmail.com>
2022-08-22 22:54:38 +08:00

91 lines
2.6 KiB
TypeScript

import React, { useState } from 'react';
import ConfigProvider from '..';
import Tooltip from '../../tooltip';
import { pureRender, fireEvent } from '../../../tests/utils';
interface Props {
spy: () => void;
}
// https://github.com/ant-design/ant-design/issues/27617
describe('ConfigProvider', () => {
const Child: React.FC<Props> = ({ spy }) => {
React.useEffect(() => spy());
return <div />;
};
const Sibling: React.FC<Props> = ({ spy }) => (
<Tooltip>
<Child spy={spy} />
</Tooltip>
);
it('should not generate new context config when render', () => {
const MemoedSibling = React.memo(Sibling);
const spy = jest.fn();
const App: React.FC = () => {
const [pageHeader, setPageHeader] = useState({ ghost: true });
const [, forceRender] = React.useReducer(v => v + 1, 1);
return (
<ConfigProvider pageHeader={pageHeader}>
<button type="button" className="render" onClick={() => forceRender()}>
Force Render
</button>
<button
type="button"
className="setState"
onClick={() => setPageHeader({ ghost: false })}
>
Change Config
</button>
<MemoedSibling spy={spy} />
</ConfigProvider>
);
};
const { container } = pureRender(<App />);
fireEvent.click(container.querySelector('.render')!);
expect(spy.mock.calls.length).toEqual(1);
fireEvent.click(container.querySelector('.setState')!);
expect(spy.mock.calls.length).toEqual(2);
});
it('should not generate new context config in nested ConfigProvider when render', () => {
const MemoedSibling = React.memo(Sibling);
const spy = jest.fn();
const App: React.FC = () => {
const [pageHeader, setPageHeader] = useState({ ghost: true });
const [, forceRender] = React.useReducer(v => v + 1, 1);
return (
<ConfigProvider pageHeader={pageHeader}>
<ConfigProvider>
<button type="button" className="render" onClick={() => forceRender()}>
Force Render
</button>
<button
type="button"
className="setState"
onClick={() => setPageHeader({ ghost: false })}
>
Change Config
</button>
<MemoedSibling spy={spy} />
</ConfigProvider>
</ConfigProvider>
);
};
const { container } = pureRender(<App />);
fireEvent.click(container.querySelector('.render')!);
expect(spy.mock.calls.length).toEqual(1);
fireEvent.click(container.querySelector('.setState')!);
expect(spy.mock.calls.length).toEqual(2);
});
});