Question

我有一个以<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());
});

使用Enzyme.mount对基于-组件的validateDOMNesting警告

1 个答案: