import React, { memo, useContext } from 'react'; import { fireEvent, pureRender } from '../../../tests/utils'; import LocaleProvider from '..'; import LocaleContext 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: React.FC = memo(() => { innerCount++; // subscribe locale context useContext(LocaleContext); return null; }); const CacheOuter: React.FC = memo(() => ( <> )); it("Rendering on LocaleProvider won't trigger rendering on child component.", () => { const { container } = pureRender(); expect(outerCount).toBe(0); expect(innerCount).toBe(1); fireEvent.click(container.querySelector('#parent_btn')!); expect(outerCount).toBe(1); expect(innerCount).toBe(1); });