使用 Enzyme.mount 的基于 <tr> 的组件的 validateDOMNesting 警告

Question

我有一个以 a<tr>作为基本元素的组件，它呈现得很好。但是当我尝试使用 测试它时mount，我收到一个警告：

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.

这是一个复制品：

import React, {Component} from 'react';
import {mount} from 'enzyme';

class Foo extends Component {
  render() {
    return (
      <tr>
        <td>moo</td>
      </tr>
    )
  }
}

it('should not fail', () => {
  const wrapper = mount(<Foo />);
  console.log(wrapper.html());

});

在对 的调用中mount，我可以用 包裹组件<table><tbody><Foo /></tbody></table>以使警告消失。但感觉应该有另一种方法来做到这一点，因为此警告不会发生shallow在应用程序本身中。

这是与：

• 反应 16.5.2
• 酶 3.7.0

Answer 1

这是修复它的方法

it('should not fail', () => {
  const wrapper = mount(<Foo />, {
    attachTo: document.createElement('tbody'),
  });
  console.log(wrapper.html());
});