fix(core): sanitize React key warning getter in dev

packages/core/core.ts

@@ -113,6 +113,12 @@ export function withBemMod<T, U extends IClassNameProps = {}>(
         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)
     }
 

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<IPresenterProps>(presenter(), { theme: 'normal' })(Presenter)
+
+    render(<WBCM key="key" />)
+
+    expect(spy).not.toHaveBeenCalled()
+    spy.mockRestore()
+  })
+
   test('should not initialized after change props', () => {
     const init = jest.fn()
     const Enhanced = withBemMod<IPresenterProps>(

packages/di/di.tsx

@@ -18,6 +18,12 @@ export function withRegistry() {
     const RegistryResolver: FC<P> = (props) => {
       const providedRegistriesRef = useRef<RegistryContext | null>(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 (
         <RegistriesConsumer>
           {(contextRegistries) => {

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(<App key="key" />)
+
+      expect(spy).not.toHaveBeenCalled()
+      spy.mockRestore()
+    })
+
     describe('useRegistry', () => {
       test('should pull component from registry', () => {
         const registry = new Registry({ id: 'registry' })