Question

使用Mocha和朋友对元素进行单元测试时是否有一种干净的方法可以模拟子元素？

例如，说我有这样的事情：

<Parent>
  <Child aProp={ this.props.clickChild() }/>
</Parent>

我想嘲笑它，所以我可以手动触发aProp，然后告诉它调用我传递的clickChild。

Answer 1

经过大量研究后，看起来这不太可能。如果你以非常特定的格式进行它们，你可以使用某些嘲弄的东西，但是你必须在你的“真实”代码中做一些非标准的事情。我不喜欢修改测试代码。

我已经确定的另一种选择是在某些情况下，我会在mount()之后找到该元素，获取提供回调的属性，然后直接触发它并执行我需要的任何操作。不是一个完全普遍的场景，但它确实有效。

以此示例代码：

// Parent.js
export default class Parent extends React.Component {
    doSomething() {
        this.props.doSomethingTriggered();
    }

    render() {
        return <div>
            <Child onClick={ this.doSomething.bind() }/>
        </div>;
    }
}

我可以使用酶来安装组件，然后触发onClick的{{1}}属性并监视我给它的回调以确保它被正确调用。

Child

不是很嘲笑，但是在某些情况下让我绕过一大堆依赖代码。

由于这是一个受欢迎的问题，即酶16的更新，现在可以实现。您现在可以在任何元素上调用it('should do something', () => { const callback = sinon.spy(() => {}); const wrapper = mount(<Parent doSomethingTriggered={ callback }/>); wrapper.find(Child).props().onClick(); sinon.assert.calledOnce(callback); });，然后直接调用它的函数。

例如，请参考以下示例：

instance()

使用酶16，您现在可以：

class Parent extends React.Component {
  render() {
    return <div><Child /></div>
  }
}

class Child extends React.Component {
  render() { return <div>Hi</div> }

  doSomething() { }
}

在React中模拟子组件

1 个答案: