diff --git a/packages/core/core.ts b/packages/core/core.ts index be0b4ece..cc73bb54 100644 --- a/packages/core/core.ts +++ b/packages/core/core.ts @@ -113,6 +113,12 @@ export function withBemMod( return jsx(ModifiedComponent, Object.assign({}, props, { className })) } + if (__DEV__) { + // React adds a non-enumerable `key` getter to props, passing them to `jsx` + // as is triggers a false "key spread" warning. + if ('key' in props) props = Object.assign({}, props) + } + return jsx(WrappedComponent, props) } diff --git a/packages/core/test/withBemMod.test.tsx b/packages/core/test/withBemMod.test.tsx index e42764af..9d07703c 100644 --- a/packages/core/test/withBemMod.test.tsx +++ b/packages/core/test/withBemMod.test.tsx @@ -62,6 +62,16 @@ describe('withBemMod', () => { ) }) + test('should not warn about key spread for unmatched prop', () => { + const spy = jest.spyOn(console, 'error').mockImplementation(() => {}) + const WBCM = withBemMod(presenter(), { theme: 'normal' })(Presenter) + + render() + + expect(spy).not.toHaveBeenCalled() + spy.mockRestore() + }) + test('should not initialized after change props', () => { const init = jest.fn() const Enhanced = withBemMod( diff --git a/packages/di/di.tsx b/packages/di/di.tsx index 5afd4c8b..c6f6aa89 100644 --- a/packages/di/di.tsx +++ b/packages/di/di.tsx @@ -18,6 +18,12 @@ export function withRegistry() { const RegistryResolver: FC

= (props) => { const providedRegistriesRef = useRef(null) + if (__DEV__) { + // React adds a non-enumerable `key` getter to props, passing them to `jsx` + // as is triggers a false "key spread" warning. + if ('key' in props) props = Object.assign({}, props) + } + return ( {(contextRegistries) => { diff --git a/packages/di/test/di.test.tsx b/packages/di/test/di.test.tsx index 9d9f14a1..a2f7d42f 100644 --- a/packages/di/test/di.test.tsx +++ b/packages/di/test/di.test.tsx @@ -113,6 +113,16 @@ describe('@bem-react/di', () => { }) describe('withRegistry', () => { + test('should not warn about key spread', () => { + const spy = jest.spyOn(console, 'error').mockImplementation(() => {}) + const App = withRegistry(new Registry({ id: 'registry' }))(() => null) + + render() + + expect(spy).not.toHaveBeenCalled() + spy.mockRestore() + }) + describe('useRegistry', () => { test('should pull component from registry', () => { const registry = new Registry({ id: 'registry' })