Question

我有一个<Parent/>组件，当我添加/删除/更改其<Child/>组件时，我想使用Enzyme来测试其行为。例如，更改

<Parent>
  <Child />
</Parent>

到

<Parent>
  <Child />
  <Child />
</Parent>

我正在使用操纵DOM的第三方库，因此我需要跟踪子项以保持React和库同步。

我尝试多次调用mount，尽管两个mount调用会创建两个不同的实例。例如，

let constructorCalls = 0;
let Parent = class extends React.Component {
  constructor(props) {
    super(props);
    constructorCalls += 1;
  }
  render() { return <span />; }
}

mount(<Parent />);
mount(<Parent />);

// Now, constructorCalls = 2

两次调用mount会创建两个不同的Parent和两个不同的构造函数调用，因此它不像React那样，如果渲染的组件没有改变则不执行任何操作。

那么，如何使用Enzyme“重新安装”具有不同孩子的组件？

Answer 1

我仍然无法找到酶的答案，所以这里是一种酶解决方案。

它不像Enzyme有这个功能，所以我通过内嵌包装器组件来完成它，并通过将props传递给包装器来改变子项的数量。（注意我使用的是ES6课程）

const WrapperComponent = class extends React.Component{
  static defaultProps = {
    n: 1
  }
  render() {
    if (this.props.n > 1) {
      return (
        <Parent>
          <Child />
          <Child />
        </Parent>
      );
    }
    return (
      <Parent>
        <Child />
      </Parent>
    );
  }
}

const wrapper = mount(<WrapperComponent/>);

// ... test the state of Parent with one child

wrapper.setProps({ n: 2});

// ... test the state of Parent with two children

使用酶，我如何测试改变孩子的数量？

1 个答案: