javascript - React 测试抛出警告 'Invalid DOM property ` %s`。您的意思是 `%s` 吗？%s'

Question

我有一个这样的 React 组件:

const a = {
 b: 'test',
 c: fn(),
 d: {
   e: 'test'
 }
};

<A propA={a} />
A.propTypes = {
 propA: PropTypes.object.isRequired
}

我正在使用 JEST 和 Enzyme 测试此组件，因此我的测试如下所示:

const a = {
 b: 'test',
 c: jest.fn(),
 d: {
   e: 'test'
 }
};

Enzyme.configure({
 adapter: new Adapter(),
});

const mounter = mount(
  <BrowserRouter>
    <A propA={a} />
  </BrowserRouter>,
);
...
...

我使用<BrowserRouter>测试它，因为我正在使用react-router作为我的应用程序路由。我进行了测试以确保组件正确呈现。

但是，此测试因以下警告而中断:

Warning: Invalid DOM property %s. Did you mean %s?%s

有人可以帮我调试为什么会抛出这个错误吗？ 预先感谢您的帮助。

Answer 1

我知道为什么会发生这种情况。上述错误不是来 self 的测试，而是来自组件 A 正在渲染的 div 之一。

其中一个设置了“tabindex”属性以使它们可聚焦。在 React 中，这些属性需要采用驼峰式命名。因此，“tabindex”变为“tabIndex”，“classname”变为“className”，依此类推。一旦我解决了这个问题，上述警告就会消失。

来源 - http://www.chrislane.info/using-tabindex-in-react/