警告：React 无法识别 DOM 元素上的“warnKey”属性

Question

我正在使用testing-library/react进行路由单元测试，下面是我的代码，我的测试用例通过了，但我收到控制台错误

React 无法识别warnKeyDOM 元素上的 prop。

任何想法 ？下面是我的代码和错误截图

import {render, screen} from '@testing-library/react'
import {createMemoryHistory} from 'history'
import React from 'react'
import {Router} from 'react-router-dom'
import '@testing-library/jest-dom/extend-expect'

import AdminPanel from './AdminPanel'

test('full app rendering/navigating',async () => {
  const history = createMemoryHistory()
  
  render(
    <Router history={history}>
      <AdminPanel />
    </Router>,
  )
  let title = await screen.findByText(/Admin Portal/i)
  expect(title).toBeInTheDocument()

}) 

Answer 1

检查未知道具警告：

如果您尝试使用 React 无法将其识别为合法 DOM 属性/属性的 prop 来渲染 DOM 元素，将会触发unknown-prop 警告。您应该确保您的 DOM 元素没有浮动的虚假 props。

您在本机 DOM 节点上使用非标准 DOM 属性，可能是为了表示自定义数据

例如

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

const MenuItemGroup = (props) => <div {...props}>Admin Portal</div>;

export default function AdminPanel() {
  return (
    <div>
      <MenuItemGroup warnKey={1} className="menu-item-group" />
    </div>
  );
}

test('full app rendering/navigating', async () => {
  render(<AdminPanel />);
  expect(screen.findByText(/Admin Portal/i)).toBeInTheDocument();
});

warnKey不是标准的 DOM 属性，我们将其直接传递给 div 元素，这将触发上述警告。解决方案是从 props 解构我们自定义的非标准属性，并通过展开运算符将className, role,等标准 DOM 属性传递id给目标元素。

如需更多标准 HTML 属性，您可以查看所有支持的 HTML 属性

const MenuItemGroup = ({ warnKey, ...rest }) => {
  // Use your custom props `warnKey`
  
  // `rest` props are all standard DOM attributes.
  return <div {...rest}>Admin Portal</div>;
}