Question

我有一个React组件：

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

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

我正在使用JEST和酶测试此组件，所以我的测试看起来像这样：

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。我进行了测试，以确保正确呈现组件。

但是，此测试失败并显示以下警告：

警告：无效的DOM属性%s。您是说%s吗？％s

有人可以帮助我调试为什么引发此错误吗？预先感谢您的帮助。

Answer 1

我发现了为什么会这样。上面的错误不是来自我的测试，而是来自组件A正在渲染的div之一。

其中一个设置了“ tabindex”属性以使其可聚焦。在React中，这些属性需要用驼峰式大小写。因此，“ tabindex”变为“ tabIndex”，“ classname”变为“ className”，依此类推。一旦我解决了，上面的警告就会消失。

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

React测试抛出警告'无效的DOM属性`％s`。您是说“％s”吗？％s

1 个答案: